JavaScript中计时器requestAnimationFrame、setTimeout、setInterval、setImmediate的使用和区别
在JavaScript中，我们经常使用requestAnimationFrame、setTimeout、setInterval和setImmediate来控制代码的执行时机。它们各有特点和适用场景：
1. requestAnimationFrame：
requestAnimationFrame主要用于浏览器动画渲染。这个函数允许你在下一次浏览器重绘前调用一个函数。它提供了一个高精度的时间戳，可以在函数内部使用。由于浏览器可以在重绘前执行动画，这可以提高动画效果的性能。
使用：
function animate() {
// 动画逻辑
requestAnimationFrame(animate);
}
requestAnimationFrame(animate);
2. setTimeout：
setTimeout用于在指定的时间后执行一次回调函数。它返回一个timeoutID，可以用来取消这个计时器。
使用：
const timeoutID = setTimeout(function() {
// 任务代码
}, 2000); // 2秒后执行
// 取消计时器
clearTimeout(timeoutID);
3. setInterval：
setInterval用于每隔一定时间间隔重复执行回调函数。它同样返回一个intervalID，可以用来取消这个计时器。
使用：
const intervalID = setInterval(function() {
// 任务代码
}, 1000); // 每隔1秒执行一次
// 取消计时器
clearInterval(intervalID);
4. setImmediate：
setImmediate的功能类似于setTimeout，但是它会在当前事件循环结束后立即执行回调函数，而不是等待指定的时间。需要注意的是，setImmediate并不是所有浏览器都支持，主要用于Node.js环境。
使用（Node.js环境）：
const immediateID = setImmediate(function() {
// 任务代码
});
// 取消立即执行
clearImmediate(immediateID);
这四个方法的执行时机有所不同：
1. requestAnimationFrame：
requestAnimationFrame 的执行时机是在浏览器准备好绘制下一帧屏幕时，也就是在浏览器每次重绘页面之前。这样可以让动画更加流畅，并且避免不必要的计算。当页面处于隐藏状态时，requestAnimationFrame 不会运行，这样可以减少资源的浪费。
2. setTimeout：
setTimeout 的执行时机是在指定的延迟时间之后，只会执行一次。具体执行时间可能会因为浏览器当前的工作负载而有所偏差。
3.setInterval：
setInterval 的执行时机是在指定的时间间隔之后，每隔指定的时间就会执行一次，直到被清除。
4.setImmediate：
setImmediate 的执行时机是在当前事件循环迭代结束后立即执行，相当于将回调函数插入到事件队列的头部。
综上所述
-
requestAnimationFrame的执行时机与浏览器的重绘时间有关 -
setTimeout和setInterval的执行时机与指定的时间间隔有关 -
setImmediate的执行时机则是在当前事件循环迭代结束后立即执行
这四个方法之间的区别如下：
1.requestAnimationFrame：
-
用于动画效果的开发，以优化动画的性能。 -
在浏览器准备好绘制下一帧屏幕时调用传入的回调函数。 -
不会在页面隐藏或最小化时运行，从而减少资源浪费。 -
调用频率与屏幕刷新率同步，可以提供平滑的动画效果。
2.setTimeout：
-
延迟一定时间后调用传入的回调函数。 -
仅调用一次。 -
时间精度不太准确，会受到浏览器当前忙碌程度的影响。 -
用于创建简单的计时器、轮询和非重要操作。
3.setInterval：
-
在一定时间间隔后调用传入的回调函数，直到被清除。 -
可以用于创建重复执行的计时器、轮询和非重要操作。 -
时间精度不太准确，同样会受到浏览器当前忙碌程度的影响。
4.setImmediate：
-
在当前事件循环迭代结束后立即执行传入的回调函数。 -
相当于将回调函数插入到事件队列的头部。 -
用于在一些异步操作完成后立即执行回调函数。
总体而言
-
requestAnimationFrame适用于动画开发 -
setTimeout和setInterval适用于计时器、轮询等需要延迟执行的操作 -
setImmediate则适用于需要立即执行的回调函数
文章出自：https://juejin.cn/post/7217994625343848506
作者：施主来了
原文始发于微信公众号（前端24）：JavaScript中计时器的使用和区别
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/216207.html
