超时后的cancelAnimationFrame

Question

Id类似于基于requestAnimationFrame的动画循环，在x毫秒后停止。我试图通过setTimeout实现这一点，该setTimeout在x之后删除了cb。但是，由于setTimeout是事件循环中最后一次调用的事件，因此在调用移除操作之前，会再渲染[[有时一帧动画。

即使增量（应该已经取消但不存在增量）始终很小，但这弄乱了我的迭代逻辑。最后一个称为

must的animationFrame在给定的时间范围x内。

我真的很想

not

在每个循环中检查是否已超过最大值。是否存在某种高优先级的setTimeout？也许基于诺言？

Answer 1

setTimeout不是事件循环中最后要调用的东西，实际上恰恰相反，在Event Loop model中，

运行动画帧回调是最后一个要调用的东西。

所以我不确定您做了什么，但是使用

setTimeout

应该很好：

let stopped = false;
const startTime = performance.now();
let rafTime;
let frame_id = requestAnimationFrame( loop );
setTimeout(() => {
  cancelAnimationFrame(frame_id);
  stopped = true;
  console.log( 'stopped' );
  console.log( "rAF loop ran for %sms", rafTime - startTime );
}, 2000);

function loop() {
  if( stopped ) { console.log( 'failed' ); }
  rafTime = performance.now();
  frame_id = requestAnimationFrame( loop );
}

另一个解决方案，同样好，因为您可能需要在rAF中做一个增量时间，就是检查传递给回调的时间戳。这是一个非常快的操作，完全不用担心性能问题。 
 
let startTime;
requestAnimationFrame( loop );
function loop( time ) {
  if( !startTime ) { startTime = time; }
  if( time - startTime >= 2000 ) {
    console.log( 'ran for %sms', time - startTime )
    return;
  }
  requestAnimationFrame( loop );
}
有关此方法的一件事是，您稍后会知道经过的时间，这意味着您可能会迟到一帧。您可以尝试自己从持续时间中减去frameRate，但是rAF速率取决于监视器的刷新率，因此很难计算。
但是这也可能是一个优点，因为您还可以执行最后一帧渲染，这在制作动画时通常很有用，这样最终调用将在确切的静态位置绘制。 
[现在请注意，Chrome has known issues以其调用rAF的方式，也许您的代码因诸如此类而中断，也许它由于其他逻辑而中断，但是如果没有您的代码，我们只能说
它应该起作用] >。