setTimeout/setInterval精确问题详解及替代方案requestAnimationFrame

setTimeout/setInterval

Javascript定时器setTimeout/setInterval有一个非常明显的问题是时间并不精确，参考下例：
假设有以下场景

// 注册延迟执行计时器，延迟10ms。
setTimeout(function timeoutHandler() {
  /* 内容需要执行6ms。 */
}, 10);
// 注册间隔计时器，延迟10ms
setInterval(function intervalHandler() {
  /* 内容需要执行8ms。 */
}, 10);
const myButton = document.getElementById("myButton");
myButton.addEventListener("click", function clickHandler() {
  /* 内容需要执行10ms。 */
});

理论上本例中的代码块需要运行18ms。

现在，假设一位耐心有限的用户在程序执行6ms时连续快速单击按钮。
执行情况:
1、[0ms]执行主线程
2、[6ms]添加点击事件到队列中
3、[10ms]两个计时器按照注册顺序加入宏任务队列
4、[18ms]单击和两个计时器等待触发，单击开始执行
5、[20ms]间隔计时器又一次触发，但是已经有该实例。触发被终止。
6、[28ms]单击事件执行完毕，执行延迟计时器任务。
7、[30ms]间隔计时器又一次触发，但是已经有该实例。触发被终止。
8、[34ms]延迟计时器执行完毕，执行间隔计时器任务。
9、[40ms]间隔计时器又一次触发，间隔处理器正在执行，所以这次可以添加到任务队列。
10、[42ms]间隔计时器执行完毕，执行刚刚添加的间隔计时器。
11、[50ms]间隔计时器执行完毕.间隔计时器又一次触发。添加到任务队列，此后10、11反复执行。

可以看到，定时器并未像预期执行。是因为JavaScript中定时器机制导致。由此引出替代方案requestAnimationFrame。须注意的是，requestAnimationFrame也属于宏任务。

requestAnimationFrame

requestAnimationFrame可以告诉浏览器你需要在在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，回调函数会在浏览器下一次重绘之前执行

编辑中。。。
参考文献：
《Secrets of the JavaScript Ninja》