Это хорошая идея использовать requestAnimationFrame в функции debounce?

Question

Это проверка моего понимания requestAnimationFrame, Мне нужна функция debounce, так как я выполняю некоторые DOM-взаимодействия каждый раз, когда размер окна изменяется, и я не хочу перегружать браузер. Типичная функция debounce будет вызывать переданную функцию только один раз за интервал; интервал обычно является вторым аргументом. Я предполагаю, что для большой части пользовательского интерфейса оптимальный интервал - это самое короткое время, которое не перегружает браузер. Мне кажется, что это именно то, что requestAnimationFrame сделал бы:

var debounce = function (func, execAsap) {
   var timeout;

  return function debounced () {
    var obj = this, args = arguments;
    function delayed () {
      if (!execAsap)
        func.apply(obj, args);
      timeout = null; 
    };

    if (timeout)
      cancelAnimationFrame(timeout);
    else if (execAsap)
      func.apply(obj, args);

    timeout = requestAnimationFrame(delayed); 
  };
}

Приведенный выше код является прямым плагиатом debounce ссылка, но с параметром requestAnimationFrame вместо setTimeout. Насколько я понимаю, это поставит в очередь переданную функцию как можно скорее, но любые вызовы, поступающие быстрее, чем может обработать браузер, будут сброшены. Это должно обеспечить максимально плавное взаимодействие. Я на правильном пути? Или я недоразумение requestAnimationFrame?

(Конечно, это работает только в современных браузерах, но есть простые полифилы для requestAnimationFrame, которые просто возвращаются к setTimeout.)

Answer 1

Это будет работать

У этого есть предостережение, которое может или не может быть важным для вас:

Если страница в данный момент не видна, анимации на этой странице можно сильно ограничить, чтобы они не обновлялись часто и, таким образом, потребляли мало ресурсов ЦП.

Так что если вы по какой-то причине заботитесь об этом для функции, которую вы отменили, вам лучше использовать setTimeout(fn, 0)

В противном случае, если вы используете это для анимации, это предполагаемое использование requestAnimationFrame