三张图理解JS高级定时器

图片出自JS高程（第三版）

图一解读：JS运行于单线程的环境中：页面载入时授限制性<script>元素中的代码；之后JS进程将等待更多代码执行；当进程空闲时，下一个代码会被触发并立刻执行。

当有大量JS逻辑代码待处理时，JS进程就会拥堵（因为要在同一个进程中，按顺序挨个执行），表现上就是网页卡死。

图二解读：定时器可以在指定时间把定时器代码加入待执行队列，但并不能保证代码执行时机，待执行队列中的代码要等JS进程空闲时才能执行。

图三解读：setInterval每隔delay间隔尝试创建定时器代码实例并加入待执行队列，但为了避免定时器代码连续运行好几次，若当前待执行队列中已有定时器代码实例，将不会创建新的定时器代码实例加入待执行队列。

也就是说setInterval定时器每隔delay间隔触发一次，尝试加入队列，JS拥堵时段将直接忽略本次操作。

这可以保证setInterval定时器推入队列的间隔一定不小于delay间隔，但不能保证其执行间隔。可以采用链式setTimeout可以保证其执行间隔。

综：以上是对定时器的个人理解，对此的重要应用有几点——数组分块、函数节流和防抖等。主要是针对JS特性，通过设计实现方式来优化其性能问题。