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

核心提示： 考虑单元格的顺序先后关系不大，通常在设计过程中需要多次重复此步骤，JavaScript 中的有限状态机，第 1 部分: 设计一个小部件(10)，反复考虑每个单元格，不时地修改其内容，所以无需重复两个单元格的内容，在 mousemove 对应的单元格内放上同样的内容即可，而且每次的考虑顺序都

考虑单元格的顺序先后关系不大。通常在设计过程中需要多次重复此步骤，反复考虑每个单元格，不时地修改其内容，而且每次的考虑顺序都会有所不同。另外随着设计的不断深入，添加（或删除）状态、做进一步的修改也十分常见。在这里，我将跳过这些反复过程，着重总结如何通过依次查看每个状态和事件来获得最终的结果表。

Inactive 状态 在这种状态下，只有初始状态可以发生，原因是 mousemove 和 mouseout 事件应该继 mouseover 事件之后发生，而且没有任何定时器在运行。所以应将此列的所有其他单元格标记为“不应发生”。

在继续之前，还应注意一下此状态的 mouseover 事件。当为此工具提示创建 HTML Division 元素时，需要将它定位于光标的附近，所以要保存光标的当前位置，当前位置由浏览器与此事件一同传递。而且在开始新的定时器之前，最好能够取消任何运行着的定时器。在 mouseover 对应的单元格内添加上述动作。

Pause 状态

在等待定时器超时时，光标可能会在 HTML 元素内移动或从此 HTML 元素移出。需要决定一旦发生这些事件所应采取的动作以及下一个状态是什么。如果在此状态发生 mouseout 事件，FadingTooltip 小部件应能返回 Inactive 状态，就像光标从未经过 HTML 元素一样，而且还必须取消定时器。在 mouseout 对应的单元格记录这些动作和转移。

另一方面，对于 mousemove 事件，则需要小部件能够继续等待光标悬停，这又要求取消和重新开启定时器。因为想要让工具提示出现在光标的附近，所以需要更新所保存的光标位置。Pause 状态下的 mousemove 事件的动作和转移与 Inactive 状态下的 mousemove 事件的动作和转移相同。所以无需重复两个单元格的内容，在 mousemove 对应的单元格内放上同样的内容即可。将此列的所有其他单元格标记为“不应发生”。