requestAnimationFrame 没有按预期工作

Question

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

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

当我调整 window 的大小时，快速来回拖动边缘，这是控制台中显示的内容：

Chrome                      Firefox                    Edge

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

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

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

Answer 1

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

这可以通过添加两个事件侦听器来演示，一个是去抖动的，一个是 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
...

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

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

requestAnimationFrame 没有按预期工作

requestAnimationFrame not working as expected

javascript

requestanimationframe

debouncing

reactjs