JavaScript频繁使用requestAnimation

lxf2023-04-11 22:04:01

在JavaScript中,大家频繁使用requestAnimationFramesetTimeoutsetIntervalsetImmediate来控制代码的落实机会。他们各有特色和使用场景:

1. requestAnimationFramerequestAnimationFrame主要运用于电脑浏览器动画渲染。这一函数公式允许再下一次电脑浏览器重绘前启用一个函数。它提供了一个高精度时间格式,还可以在函数公式内部使用。因为电脑浏览器还可以在重绘前实行动漫,这能提高动态效果性能

应用:

function animate() {
  // 动漫逻辑性
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);
2. setTimeoutsetTimeout用以在指定时间时实行一次调用函数。它回到一个timeoutID,可用于撤销这一记时器。

应用:

const timeoutID = setTimeout(function() {
  // 每日任务编码
}, 2000); // 2秒之后实行

// 撤销记时器
clearTimeout(timeoutID);
3. setIntervalsetInterval用以每过一定时长间隔重复执行调用函数。它一样回到一个intervalID,可用于撤销这一记时器。

应用:

const intervalID = setInterval(function() {
  // 每日任务编码
}, 1000); // 间隔1秒实行一次

// 撤销记时器
clearInterval(intervalID);
4. setImmediatesetImmediate的功效类似setTimeout,可是它会在现阶段事件循环完成后立即执行调用函数,而非等候指定时长。需注意,setImmediate并非所有电脑浏览器也支持,主要运用于Node.js自然环境。

应用(Node.js自然环境):

const immediateID = setImmediate(function() {
  // 每日任务编码
});

// 撤销立即执行
clearImmediate(immediateID);

这四个方式的落实机会各有不同:

  1. requestAnimationFrame

requestAnimationFrame 的落实机会是用浏览器备好制作下一帧显示屏时,就是说在电脑浏览器每一次重绘网页页面以前。这样才能让动漫更加流畅,而且减少不必要的测算。当网页页面处在掩藏的状态下,requestAnimationFrame 不容易运作,这样可以避免资源浪费。

  1. setTimeout

setTimeout 的落实机会要在指定响应时间以后,只能运行一次。实际实施时间可能会因电脑浏览器现阶段的工作负载有所误差。

  1. setInterval

setInterval 的落实机会要在特定时间间隔以后,每过特定的时间会实行一次,直至被消除。

  1. setImmediate

setImmediate 的落实机会要在现阶段事情循环迭代完成后立即执行,等同于将调用函数插入事件队列头部。

总的来说,requestAnimationFrame 的落实机会与浏览器重绘时长相关,setTimeoutsetInterval 的落实机会与特定时间间隔相关,而 setImmediate 的落实机会则在现阶段事情循环迭代完成后立即执行。


这四个方式之间的差别如下所示:

  1. requestAnimationFrame
  • 用以动态效果的研发,以提升动画特性。
  • 用浏览器备好制作下一帧显示屏时启用传到的调用函数。
  • 不能在网页页面掩藏或降到最低时运作,从而降低资源浪费现象。
  • 启用工作频率与屏幕刷新频率同歩,能够提供光滑的动态效果。
  1. setTimeout
  • 延迟时间一定时间后启用传到的调用函数。
  • 仅启用一次。
  • 时间精度不是很精确,也会受到电脑浏览器现阶段繁忙水平产生的影响。
  • 用以建立简单记时器、轮循与非关键实际操作。
  1. setInterval
  • 在一定时长间隔后启用传到的调用函数,直至被消除。
  • 可用作建立重复执行的记时器、轮循与非关键实际操作。
  • 时间精度不是很精确,同样也会遭受电脑浏览器现阶段繁忙水平产生的影响。
  1. setImmediate
  • 在目前事情循环迭代完成后立即执行传到的调用函数。
  • 等同于将调用函数插入事件队列头部。
  • 用以在一些异步操作结束后立即执行调用函数。

总而言之,requestAnimationFrame 适用动漫开发设计setTimeoutsetInterval 适用记时器、轮循等都需要延迟执行的操作,而 setImmediate 则适用必须立即执行的调用函数。