requestAnimationFrame无法正常工作

Question

我正在尝试使用resize在requestAnimationFrame事件上的React中实现反跳，并编写了以下简单的CodePen：

https://codepen.io/robloche/pen/RmLjZV

但是，尽管MDN声明应该如此，但Chrome（v75），Firefox（v67）和Edge（v42）的行为却不一致。

调整窗口大小时，快速前后拖动边缘，这是控制台中显示的内容：

Chrome                      Firefox                    Edge

只有edge的行为符合我的预期。

我误解了什么吗？还是打算这样做？

尽管Edge和其他两个之间存在另一个不一致：最大化窗口时，调整大小事件在Edge上触发一次，在Chrome和Firefox上触发两次。 那应该没什么大问题，但是我很好奇背后的原因...

Answer 1

您对requestAnimationFrame的理解可能是正确的。这里发生的是，当今的浏览器确实已经将resize事件反跳到了屏幕刷新率。

这可以通过添加两个事件侦听器来演示，一个侦听器和一个 nude ：

addEventListener('resize', e => console.log('non-debounced'));
let active = null;
addEventListener('resize', e => {
  if(active) {
    console.log("cancelling");
    cancelAnimationFrame(active);
  }
  active = requestAnimationFrame(() => {
    console.log('debounced');
    active = null;
  });
});

在上述两种浏览器中，日志均为

  

不反跳
  去抖
  未去抖
  去抖
  ...

事实是，在两个已去抖动的事件之间触发了一个单独的“未去抖动”事件处理程序，这证明浏览器甚至实际上已将未去抖动的版本都进行了去抖动。

因此，由于这些事件已被消除抖动，因此永远不会到达您的消除抖动代码。