在 debounce 函数中使用 requestAnimationFrame 是个好主意吗？

Question

这是对我对 requestAnimationFrame 理解的检查。我需要一个 debounce 函数，因为每次 window 调整大小时我都在做一些 DOM 交互，我不想让浏览器过载。典型的去抖动函数每个时间间隔只会调用一次传递的函数；间隔通常是第二个参数。我假设对于很多 UI 工作，最佳间隔是不会使浏览器过载的最短时间量。在我看来，这正是 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); 
  };
}

以上代码直接抄袭自 the above debounce link，但使用了 requestAnimationFrame 而不是 setTimeout。以我的理解，这将尽快对传入的函数进行排队，但是任何比浏览器可以处理的速度更快的调用都会被丢弃。这应该会产生尽可能流畅的交互。我在正确的轨道上吗？还是我误会了requestAnimationFrame?

（当然，这只适用于现代浏览器，但是 requestAnimationFrame 有简单的 polyfill，可以回退到 setTimeout。）

Answer 1

这会奏效。

它有一个对您来说可能重要也可能不重要的警告：

If the page is not currently visible, animations on that page can be throttled heavily so that they do not update often and thus consume little CPU power.

所以如果你出于某种原因关心你正在去抖动的功能，你最好使用 setTimeout(fn, 0)

否则，如果您将其用于动画，这就是 requestAnimationFrame

的预期用途

在 debounce 函数中使用 requestAnimationFrame 是个好主意吗？

Is it a good idea to use requestAnimationFrame within a debounce function?

javascript

requestanimationframe

debouncing