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

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

上面的代码是从the above debounce link直接敲竹杠，但使用requestAnimationFrame用来代替的setTimeout。根据我的理解，这将尽快排队传入函数，但任何进入速度超过浏览器的函数都可能会丢失。这应该会产生最平稳的交互。我在正确的轨道上吗？还是我误解了？

（当然，这仅适用于现代的浏览器，但也有容易polyfills为requestAnimationFrame，只是回落到setTimeout的。）

来源

2015-03-31 carpeliam

如果是关于重画，并且你想要一个流畅的动画，你想*节流*不*反弹*。请重新阅读已链接的博客文章，了解它们之间的区别 - debounce不是“每个区间调用一次传递的函数” – Bergi 2015-03-31 02:32:43

@Bergi感谢。我第一次考虑这个问题，但我重新考虑了这个问题，并阅读了Ben Alman关于差异的笔记http://benalman.com/projects/jquery-throttle-debounce-plugin/，我想你可能是对的 - 尽管如此，我认为使用快速响应的快速浏览器可以最大限度地减少两者之间的差异。 – carpeliam 2015-03-31 16:43:11

想着同样的事情。很高兴我找到了这篇文章。添加一个上下文参数来代替'var obj = this'是个好主意。这样，人们在调用之前不必使用'bind'，并保存创建多个函数作用域 – Dogoku 2015-07-03 00:17:55

这将工作。

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

如果页面当前不可见，该网页上的动画可以重来节流，使他们不经常更新，因此消耗很小的CPU功率。

因此，如果您由于某种原因在乎这对你是去抖动功能，你使用setTimeout(fn, 0)

否则，如果您使用的是本作的动画更好，这是

使用目的

来源

2015-03-31 01:53:53 mkoryak

，这对我的特殊情况有很大的意义 - 我在'resize'事件上做了一些DOM交互，并且如果我的选项卡没有激活，直到用户切换回我的选项卡后，我才确定这种交互没有发生。 – carpeliam 2015-03-31 02:11:11

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

回答

相关问题