代码之家 › 专栏 › 技术社区 › Rodolphe

requestAnimationFrame未按预期工作

debouncing requestanimationframe reactjs javascript

2

Rodolphe · 技术社区 · 5 年前

resize 事件,使用 requestAnimationFrame 并编写了以下简单的代码笔:

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

但是Chrome(v75)、Firefox(v67)和Edge(v42)的行为并不一致,尽管 MDN

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

Chrome                      Firefox                    Edge

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

我是误解了什么,还是故意的?

这应该不是什么大问题,但我很好奇背后的原因。。。

1 回复 | 直到 5 年前

1

3

Kaiido NickSlash 4 年前

您对requestAnimationFrame的理解可能是正确的。这里发生的事情是,现在的浏览器已经消除了 resize in accordance to the specs .

可以通过添加两个事件侦听器来演示这一点,一个去抖动,另一个去抖动裸体

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;
  });
});

非去抖动
取消公告

取消公告
...

因此,由于这些事件已被取消播音,因此您的取消播音代码永远不会到达。