setTimeout 与 requestAnimationFrame - Javascript

简介

setTimeout 和 requestAnimationFrame 都是 Javascript 中用于做定时循环的工具，但是它们有一些本质的区别。

setTimeout 是一个函数，它允许我们在一定的时间之后执行一个指定的函数。requestAnimationFrame 也是一个函数，但是它在浏览器可用时执行一次，它是由浏览器通过帧率来确定自己的时间来调用的。

setTimeout

setTimeout 接收两个参数，它们是回调函数和间隔时间。

setTimeout(function() {
  console.log('Hello World!');
}, 1000); // 1 second delay

使用 setTimeout 时要注意，它可能会导致代码执行顺序不可预测。由于 Javascript 是单线程的，任何一个定时器都不能影响其他定时器或事件。但是如果其他代码的执行时间超过了定时器的延迟时间，那么定时器的回调函数会执行得比预期更迟。setTimeout 所执行的时间并不一定准确，因为它延迟的时间可能受到其他因素的影响。

requestAnimationFrame

requestAnimationFrame 是浏览器提供的新特性，它可以让你执行基于帧率的循环，而不是以间隔时间为基础。因此它对于动画和交互性能非常好。

requestAnimationFrame 接收一个回调函数作为参数，这个函数应该在下一帧执行。如果在浏览器完成绘图后，还有尚未提交的任务，那么浏览器会将这些任务提交给下一帧。

window.requestAnimationFrame(function() {
  console.log('Hello World!');
});

requestAnimationFrame 比 setTimeout 更加高效，因为它会在浏览器需要重绘时才执行回调函数，而不是每隔一段时间就执行回调函数。这意味着当浏览器面临重压时，requestAnimationFrame 可以避免过度绘制。它会等到浏览器空闲时再执行。

总结

setTimeout 和 requestAnimationFrame 都是非常有用的工具，但它们在不同的场景下的效果也不同。setTimeout 更适用于间隔相同的定时器，而 requestAnimationFrame 更适用于动画和一些非常频繁的绘图操作。在使用时，我们要根据实际需求选择合适的工具。

END