JavaScript中计时器requestAnimationFrame、setTimeout、setInterval、setImmediate的使用和区别
在JavaScript中,我们经常使用requestAnimationFrame、setTimeout、setInterval和setImmediate来控制代码的执行时机。它们各有特点和适用场景:
- requestAnimationFrame: requestAnimationFrame主要用于浏览器动画渲染。这个函数允许你在下一次浏览器重绘前调用一个函数。它提供了一个高精度的时间戳,可以在函数内部使用。由于浏览器可以在重绘前执行动画,这可以提高动画效果的性能。
使用:
function animate() {
// 动画逻辑
requestAnimationFrame(animate);
}
requestAnimationFrame(animate); - setTimeout: setTimeout用于在指定的时间后执行一次回调函数。它返回一个timeoutID,可以用来取消这个计时器。
使用:
const timeoutID = setTimeout(function() {
// 任务代码
}, 2000); // 2秒后执行
// 取消计时器
clearTimeout(timeoutID); - setInterval: setInterval用于每隔一定时间间隔重复执行回调函数。它同样返回一个intervalID,可以用来取消这个计时器。
使用:
const intervalID = setInterval(function() {
// 任务代码
}, 1000); // 每隔1秒执行一次
// 取消计时器
clearInterval(intervalID); - setImmediate: setImmediate的功能类似于setTimeout,但是它会在当前事件循环结束后立即执行回调函数,而不是等待指定的时间。需要注意的是,setImmediate并不是所有浏览器都支持,主要用于Node.js环境。
使用(Node.js环境):
const immediateID = setImmediate(function() {
// 任务代码
});
// 取消立即执行
clearImmediate(immediateID);
这四个方法的执行时机有所不同:
requestAnimationFrame:
requestAnimationFrame 的执行时机是在浏览器准备好绘制下一帧屏幕时,也就是在浏览器每次重绘页面之前。这样可以让动画更加流畅,并且避免不必要的计算。当页面处于隐藏状态时,requestAnimationFrame 不会运行,这样可以减少资源的浪费。
setTimeout:
setTimeout 的执行时机是在指定的延迟时间之后,只会执行一次。具体执行时间可能会因为浏览器当前的工作负载而有所偏差。
setInterval:
setInterval 的执行时机是在指定的时间间隔之后,每隔指定的时间就会执行一次,直到被清除。
setImmediate:
setImmediate 的执行时机是在当前事件循环迭代结束后立即执行,相当于将回调函数插入到事件队列的头部。
综上所述,requestAnimationFrame 的执行时机与浏览器的重绘时间有关,setTimeout 和 setInterval 的执行时机与指定的时间间隔有关,而 setImmediate 的执行时机则是在当前事件循环迭代结束后立即执行。
这四个方法之间的区别如下:
1.requestAnimationFrame:
用于动画效果的开发,以优化动画的性能。
在浏览器准备好绘制下一帧屏幕时调用传入的回调函数。
不会在页面隐藏或最小化时运行,从而减少资源浪费。
调用频率与屏幕刷新率同步,可以提供平滑的动画效果。
2.setTimeout:
延迟一定时间后调用传入的回调函数。
仅调用一次。
时间精度不太准确,会受到浏览器当前忙碌程度的影响。
用于创建简单的计时器、轮询和非重要操作。
3.setInterval:
在一定时间间隔后调用传入的回调函数,直到被清除。
可以用于创建重复执行的计时器、轮询和非重要操作。
时间精度不太准确,同样会受到浏览器当前忙碌程度的影响。
4.setImmediate:
在当前事件循环迭代结束后立即执行传入的回调函数。
相当于将回调函数插入到事件队列的头部。
用于在一些异步操作完成后立即执行回调函数。
总体而言,requestAnimationFrame 适用于动画开发,setTimeout 和 setInterval 适用于计时器、轮询等需要延迟执行的操作,而 setImmediate 则适用于需要立即执行的回调函数。
相关文章
- javascript中的后退和刷新
- javascript_JavaScript走向成熟
- javascript html转换成markdown,如何使用Turndown使用JavaScript将HTML转换为Markdown[通俗易懂]
- 阶段二:浏览器中JavaScript的执行机制
- JavaScript数组方法中 push() 和 unshift() 的区别
- 用javascript分类刷leetcode24.其他类型题(图文视频讲解)1
- JavaScript实现的漂浮广告效果代码详解编程语言
- 硬核观察 #335 三分之二的开发者在使用 JavaScript
- 用JavaScript绘图——JS2D函数集
- javascript播放器控制
- javascript火狐(firefox)不显示本地图片问题解决
- javascript一些不错的函数脚本代码
- Javascript访问样式表实现代码
- javascript可控式透明特效实现代码
- Javascript表达式中连续的&&和||之赋值区别
- 说明你的Javascript技术很烂的五个原因
- JavaScript类型的包装对象(TypedWrappers)
- JavaScript高级程序设计阅读笔记(十六)javascript检测浏览器和操作系统-detect.js
- 简略说明Javascript中的==(等于)与===(全等于)区别
- javascript中的parseInt和parseFloat区别
- 在javaScript中关于submit和button的区别介绍
- Javascript学习笔记之函数篇(三):闭包和引用
- javascript数组遍历for与forin区别详解
- 浅析Javascript中“==”与“===”的区别
- Javascript中的五种数据类型详解
- javascript二维数组转置实例
- Javascript拖拽雏形中的一些问题(逐行分析代码,让你轻松了拖拽的原理)
- 浅谈JavaScript中定义变量时有无var声明的区别
- JavaScript实现的in_array函数