时间戳

首页 > 解决方案 > 是否调用 requestAnimationFrame 堆栈？

javascript - 是否调用 requestAnimationFrame 堆栈？

问题描述

我有以下功能

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

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

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

我是否需要将我的fire()功能修改为这样的东西？

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

还是requestAnimationLoop()只是在开始新循环时自动知道结束当前循环？

标签： javascripthtmlanimationcanvasrequestanimationframe

解决方案

是的，调用requestAnimationFrame会将所有回调堆叠到动画帧回调映射中。

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

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

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

推荐阅读