在去抖功能中使用requestAnimationFrame是个好主意吗？

Question

这是对我的理解的检查requestAnimationFrame.我需要一个去抖动功能,因为每次调整窗口大小时我都会做一些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); 
  };
}

上面的代码是从上面的debounce链接直接剽窃,但使用requestAnimationFrame而不是setTimeout.根据我的理解,这将尽快排队传入函数,但任何比浏览器更快处理的调用都将被删除.这应该产生最平滑的交互.我是在正确的轨道上吗？还是我误会了requestAnimationFrame？

(当然这仅适用于现代浏览器,但是requestAnimationFrame有简单的polyfill,它们可以回退到setTimeout.)

Answer 1

这会起作用。

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

如果页面当前不可见，则可以严重限制该页面上的动画，使其不会经常更新，从而消耗很少的 CPU 资源。

因此，如果您出于某种原因关心您要消除抖动的函数，那么您最好使用setTimeout(fn, 0)

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