是否调用 requestAnimationFrame 堆栈？答案

【问题标题】：Do calls to requestAnimationFrame stack?是否调用 requestAnimationFrame 堆栈？
【发布时间】：2021-08-06 02:14:38
【问题描述】：

我有以下功能

function render() {
  init = timeStep(init)
  if (steps <= yQuotient) {
    requestAnimationFrame(render)
  }
}

export function fire() {
  setup();
  render();
}

然后，每当我需要启动/重新启动应用程序时，我都会调用fire()。我的问题是，这是否会导致多个requestAnimationLoop() 同时激活，因为它们会像 eventListeners 在重复调用时那样建立起来，可能会影响性能。

我是否需要将我的 fire() 函数修改为类似的内容？

export function fire() {
  cancelAnimationFrame(render)
  setup();
  render();
}

或者requestAnimationLoop() 只是自动知道在启动新循环时结束当前循环？

【问题讨论】：

标签： javascript html animation canvas requestanimationframe

【解决方案1】：

是的，对requestAnimationFrame 的调用会将所有回调堆栈到map of animation frame callbacks。

每个绘画帧，这个地图的键都被获取并循环，允许从这样的回调中安排一个新的动画帧回调，用于在下一个绘画帧触发。

所以是的，在同一个事件循环迭代中多次调度同一个回调会降低页面的性能，因为它必须多次执行相同的工作。

目前还不清楚您的所有系统是如何工作的，但是对于游戏和交互式动画来说，一个经常使用的策略是保持一个主动画循环一直运行并调用子任务。外部事件仅修改从这些子任务访问的对象的状态。

【讨论】：