在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);
这四个方式的落实机会各有不同:
requestAnimationFrame
:
requestAnimationFrame
的落实机会是用浏览器备好制作下一帧显示屏时,就是说在电脑浏览器每一次重绘网页页面以前。这样才能让动漫更加流畅,而且减少不必要的测算。当网页页面处在掩藏的状态下,requestAnimationFrame
不容易运作,这样可以避免资源浪费。
setTimeout
:
setTimeout
的落实机会要在指定响应时间以后,只能运行一次。实际实施时间可能会因电脑浏览器现阶段的工作负载有所误差。
setInterval
:
setInterval
的落实机会要在特定时间间隔以后,每过特定的时间会实行一次,直至被消除。
setImmediate
:
setImmediate
的落实机会要在现阶段事情循环迭代完成后立即执行,等同于将调用函数插入事件队列头部。
总的来说,requestAnimationFrame
的落实机会与浏览器重绘时长相关,setTimeout
和 setInterval
的落实机会与特定时间间隔相关,而 setImmediate
的落实机会则在现阶段事情循环迭代完成后立即执行。
这四个方式之间的差别如下所示:
requestAnimationFrame
:
- 用以动态效果的研发,以提升动画特性。
- 用浏览器备好制作下一帧显示屏时启用传到的调用函数。
- 不能在网页页面掩藏或降到最低时运作,从而降低资源浪费现象。
- 启用工作频率与屏幕刷新频率同歩,能够提供光滑的动态效果。
setTimeout
:
- 延迟时间一定时间后启用传到的调用函数。
- 仅启用一次。
- 时间精度不是很精确,也会受到电脑浏览器现阶段繁忙水平产生的影响。
- 用以建立简单记时器、轮循与非关键实际操作。
setInterval
:
- 在一定时长间隔后启用传到的调用函数,直至被消除。
- 可用作建立重复执行的记时器、轮循与非关键实际操作。
- 时间精度不是很精确,同样也会遭受电脑浏览器现阶段繁忙水平产生的影响。
setImmediate
:
- 在目前事情循环迭代完成后立即执行传到的调用函数。
- 等同于将调用函数插入事件队列头部。
- 用以在一些异步操作结束后立即执行调用函数。
总而言之,requestAnimationFrame
适用动漫开发设计,setTimeout
和 setInterval
适用记时器、轮循等都需要延迟执行的操作,而 setImmediate
则适用必须立即执行的调用函数。