8

这是对我对requestAnimationFrame. 我需要一个去抖动功能，因为每次调整窗口大小时我都会进行一些 DOM 交互，并且我不想让浏览器过载。典型的 debounce 函数每个间隔只会调用一次传递的函数；区间通常是第二个参数。我假设对于很多 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。）

4

1 回答 1

2

这将起作用。

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

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

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

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

于 2015-03-31T01:53:53.020 回答