JavaScript 中的有限状态机，第 1 部分: 设计一个小部件

核心提示： 每次发生 timetick 事件，它都要适当增加工具提示的不透明度，JavaScript 中的有限状态机，第 1 部分: 设计一个小部件(9)，当达到工具提示的最大不透明度时，它必须在转入 Display 状态等待之前取消此重复断续器并开启另一个定时器，下一个状态又将是什么，这虽然有些乏味

每次发生 timetick 事件，它都要适当增加工具提示的不透明度。当达到工具提示的最大不透明度时，它必须在转入 Display 状态等待之前取消此重复断续器并开启另一个定时器。

当定时器的 timeout 事件发生时，它必须在转入 FadeOut 状态等待之前开启另一个重复断续器。

每次在 FadeOut 状态发生 timetick 事件时，它都必须要适当减少工具提示的不透明度。当工具提示的不透明度减少到零时，小部件会取消此重复断续器，删除工具提示并返回到 Inactive 状态，在该状态等待被另一个 mouseover 事件激活。

图 2 在触发这些动作的事件之下列出了这些动作。

图 2. 在初始状态图的事件下追加动作

将状态图转换成状态表

上述的状态图是设计有限状态机的一个很好的开始。但表形式更适合于完成设计，原因是表可以给出事件和状态的所有组合以供参考。

要将状态图转换成状态表，可以在行标题内填上事件名，在列标题内填上状态名。这些名字的顺序是任意的；我在第一行的开始位置放入了初始状态，在第一列的开始位置放入了初始事件，随后将动作和每一事件的下一状态复制到表中适当的单元格内，如 图 3 所示。

图 3. 与初始状态图对应的初始状态表

完成状态表

要完成有限状态机的设计，需要顾及表中的每一个空单元格。您需要为每个单元格做这样的考虑：该事件是否可以发生在该状态，如果可以，小部件在这种情况下将采取什么动作，下一个状态又将是什么。这虽然有些乏味，但却是设计过程的必需部分。