Javascript 可以从输入事件调用 requestAnimationFrame 并且仍然尊重刷新率吗

如果没有要设置动画的内容，请停止运行动画循环:

function animate() {
  // return early if there's nothing to do, halting the animation loop:
  if (!state.stateUpdated) return;

  // soft-lock our state so that values will get written to
  // our "pending state" object instead of the real state, to
  // prevent concurrent modification.
  pendingState = {};

  // then resolve a frame:
  doSomethingThisFrame();

  // and then apply any pending state changes that
  // occurred while we were busy during the frame.
  applyPendingStateChanges();
}

function doSomethingThisFrame() { 
  // ...do all the things...

  // mark the state as handled:
  state.stateUpdated = false;

  // and schedule the next frame:
  requestAnimationFrame(animate);
}

然后，您可以将该标志设置为True，然后调用animate()，作为在输入事件期间更新状态的一部分，这样，只要有需要设置动画的内容，您的代码就会再次开始运行.如果没有，那么早期的返回将使页面再次恢复为静态页面.

当然，您需要确保不会同时更新正在忙于处理帧的状态while，因此需要确保拥有一个既可以充当软锁又可以在实际状态被锁定时写入值的"挂起状态"变量:

const state = { stateUpdated: false };
let pendingState = undefined;

function updateState(name, value) {
  // apply this update either directly, or "for later":
  const target = pendingState ?? state;
  target[name] = value;
  target.stateUpdated = true;
  // and if we applied it directly, call animate.
  if (target === state) animate();
}

function applyPendingStateChanges() {
  if (!pendingState) throw new Error(`apply pending called without pending state`);
  Object.assign(state, pendingState);
  pendingState = undefined;
  if (state.stateUpdated) animate();
}