放弃setInterval-说说定时器

上述事件循环机制的核心是：JS引擎线程和事件触发线程

但事件上，里面还有一些隐藏细节，譬如调用setTimeout后，是如何等待特定时间后才添加到事件队列中的？

是JS引擎检测的么？当然不是了。它是由定时器线程控制（因为JS引擎自己都忙不过来，根本无暇分身）

为什么要单独的定时器线程？因为JavaScript引擎是单线程的, 如果处于阻塞线程状态就会影响记计时的准确，因此很有必要单独开一个线程用来计时。

什么时候会用到定时器线程？当使用setTimeout或setInterval时，它需要定时器线程计时，计时完成后就会将特定的事件推入事件队列中。

 

• 即便是0毫秒后就推入事件队列，但是W3C在HTML标准中规定，规定要求setTimeout中低于4ms的时间间隔算为4ms。(不过也有一说是不同浏览器有不同的最小时间设定)

• 就算不等待4ms，就算假设0毫秒就推入事件队列，时间也不一定准确。因为只有可执行栈内空了后才会主动读取事件队列。

那是用setTimeout还是setInterval？

 

用setTimeout模拟定期计时和直接用setInterval是有区别的。

因为每次setTimeout计时到后就会去执行，然后执行完内部代码后，所以这里可能有一段时间后才会继续setTimeout，中间就多了误差（误差多少与代码执行时间有关）

而setInterval则是每次都精确的隔一段时间推入一个事件（但是，事件的实际执行时间不一定就准确，还有可能是这个事件还没执行完毕，下一个事件就来了）

而且setInterval有一些比较致命的问题就是：

• 累计效应（上面提到的），上一个还没执行完。

就会导致定时器代码连续运行好几次，而之间没有间隔。
就算正常间隔执行，多个setInterval的代码执行时间可能会比预期小（因为代码执行需要一定时间）

• 譬如像iOS的webview,或者Safari等浏览器中都有一个特点，在滚动的时候是不执行JS的，如果使用了setInterval，会发现在滚动结束后会执行多次由于滚动不执行JS积攒回调，如果回调执行时间过长,就会非常容器造成卡顿问题和一些不可知的错误（据说setInterval自带优化，不会重复添加回调）

• 而且把浏览器最小化显示等操作时，setInterval并不是不执行程序，

它会把setInterval的回调函数放在队列中，等浏览器窗口再次打开时，一瞬间全部执行时

所以，鉴于这么多但问题，目前一般认为的最佳方案是：用setTimeout模拟setInterval，或者特殊场合直接用requestAnimationFrame

补充：JS高程中有提到，JS引擎会对setInterval进行优化，如果当前事件队列中有setInterval的回调，不会重复添加。不过，仍然是有很多问题。。。

 

最后留一个作业 setInterval 会不会累计，验证他的执行特点。

 

到这里咱们这个系列快说完了，还有最后一节，现在不知道大家听了这些后有什么感想，不知道对大家有么有帮助。我自认为啊有些地方说的不够明确和透彻。很多都是把点带出来了，有些细节可能还需要大家继续学习，查一些资料进行深入研究或者关注下重度前端这个号 我自己的号，分享的内容都有文字版的，也包括我日常工作中的一些技术总结和积累。今天太晚了，最后一节我先想想怎么说吧。

 

再见，各位。