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

核心提示： 有限状态机将需要响应以下事件： 当光标移至、移上和移出某一 HTML 元素时，浏览器能分别将 mouseover、mousemove 和 mouseout 事件传递给 JavaScript，JavaScript 中的有限状态机，第 1 部分: 设计一个小部件(8)， JavaScript

有限状态机将需要响应以下事件：

当光标移至、移上和移出某一 HTML 元素时，浏览器能分别将 mouseover、mousemove 和 mouseout 事件传递给 JavaScript。

JavaScript 可以编程实现 timeout 事件来指示光标已停止足够长的一段时间或工具提示已显示了足够长的一段时间，也可以编程实现 timetick 事件来分别增减工具提示淡入和淡出的不透明度。

您将需要设计状态机在事件间等待的一些状态。需要调用小部件的初始状态 Inactive，小部件在该状态下等待被 mouseover 事件激活。小部件在 Pause 状态下等待直到 timeout 事件指示光标已经在 HTML 元素上停留了足够长的时间。之后在用 timetick 事件动画式淡入的同时，小部件会在 FadeIn 状态下等待，继而又会在 Display 状态等待另一个 timeout 事件。最后，在用更多 timetick 事件动画式淡出的同时，小部件会在 FadeOut 状态下等待。小部件转回到 Inactive 状态，在此状态下等待另一个 mouseover 事件。

图 1 是此过程相应的图形表示，其中的气球形圆圈代表状态，连接圆圈的箭头线代表转移，箭头线上的标注代表事件。双层边界的圆圈代表初始状态。

图 1. 状态图的初始设计

FadingTooltip 小部件必须针对它处理的每个事件采取动作：

当 mouseover 事件在 Inactive 状态发生时，在转入 Pause 状态等待之前，它必须要开启一个一次定时器。

当 timeout 事件发生时，在转入 FadeIn 状态等待之前，它必须要创建工具提示（初始不透明度值为零）并开启一个重复断续器。