requestAnimationFrame не работает должным образом

Question

Я пытаюсь реализовать отладку в React для события resize, используя requestAnimationFrame и написал следующий простой CodePen:

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

Но поведение несогласованно для Chrome (v75), Firefox (v67) и Edge (v42), хотя MDN утверждает, что это должно быть.

Когда я изменяю размер окна, быстро перетаскиваю край назад идалее, вот что отображается в консоли:

Chrome                      Firefox                    Edge

Только Edge ведет себя так, как я и ожидал.

Я что-то неправильно понимаю или это задумано?

Хотя есть еще одно несоответствие между Edge и двумя другими: при максимизации окна событие resizeсрабатывает один раз на Edge и дважды на Chrome и Firefox.Это не должно быть большой проблемой, но мне любопытно узнать причину ...

Answer 1

Ваше понимание requestAnimationFrame может быть правильным.Здесь происходит то, что в настоящее время браузеры уже отклоняют событие resize до частоты обновления экрана.

Это можно продемонстрировать, добавив два прослушивателя событий, один отклоненный и один ню :

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

В обоих вышеупомянутых браузерах журнал будет

без опровержения
с откровением
без опровержения
с отклонением
...

Тот факт, что только один «необъявленный» обработчик событий, запущенный между двумя неосуществленными, доказывает, что даже не опровергнутая версия фактически отклоняется браузером.

Таким образом, поскольку эти события уже отменены, ваш код debouncer никогда не достигается.