调用 requestAnimationFrame 堆栈吗？

问题描述

我有以下功能

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

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

然后，每当我需要启动/重新启动应用程序时，我都会调用 fire()。我的问题是，这是否会导致多个 requestAnimationLoop() 模拟活动，因为它们会像 eventListener 一样在重复调用时产生，可能会影响性能。

我需要将我的 fire() 函数修改为这样的吗？

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

或者 requestAnimationLoop() 是否会在新循环开始时自动知道结束当前循环？

解决方法

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

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

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

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