Question

这是对我对requestAnimationFrame的理解的检查。我需要一个debounce函数，因为每次调整窗口大小时我都会进行一些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

这会奏效。

它有一个警告，可能对你很重要，也可能不重要：

如果页面当前不可见，则该页面上的动画可能会受到严重限制，因此它们不会经常更新，从而消耗很少的CPU能力。

因此，如果您出于某种原因关注此功能，那么您最好使用setTimeout(fn, 0)

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

的预期用途

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

1 个答案: