javascript - requestAnimationFrame 没有按预期工作

Question

我正在尝试在 React 中对 resize 事件实现去抖动，使用 requestAnimationFrame 并编写了以下简单的 CodePen:

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

但是 Chrome (v75)、Firefox (v67) 和 Edge (v42) 的行为并不一致，尽管 MDN声明它应该是。

当我调整窗口大小时，快速来回拖动边缘，以下是控制台中显示的内容:

Chrome                      Firefox                    Edge

只有边缘的行为符合我的预期。

我是误会了什么还是故意的？

尽管如此，Edge 与其他两者之间还有另一个不一致之处:当最大化窗口时，调整大小事件在 Edge 上触发一次，在 Chrome 和 Firefox 上触发两次。这应该不是什么大问题，但我很好奇背后的原因......

Answer 1

您对 requestAnimationFrame 的理解可能是正确的。这里发生的是现在的浏览器确实已经将 resize 事件去抖动到屏幕刷新率，in accordance to the specs .

这可以通过添加两个事件监听器来证明，一个是 debounced 的，一个是 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;
  });
});

在上述两种浏览器中，日志都是

non-debounced
debounced
non-debounced
debounced
...

事实上，只有一个“非去抖动”事件处理程序在两个去抖动事件处理程序之间触发，这证明即使是非去抖动版本实际上也被浏览器去抖动了。

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