javascript - 使用 requestAnimationFrame 而不是 setTimeout 进行去抖动/节流有什么好处

我在 MDN 上遇到过这个例子，它使用 requestAnimationFrame 而不是 setTimeout :

// Reference: http://www.html5rocks.com/en/tutorials/speed/animations/

var last_known_scroll_position = 0;
var ticking = false;

function doSomething(scroll_pos) {
  // do something with the scroll position
}

window.addEventListener('scroll', function(e) {
  last_known_scroll_position = window.scrollY;
  if (!ticking) {
    window.requestAnimationFrame(function() {
      doSomething(last_known_scroll_position);
      ticking = false;
    });
  }
  ticking = true;
});

这让我开始思考我们是否可以使用 requestAnimationFrame 而不是 setTimeout(fn, 0)，这是否有任何优势？我用谷歌搜索了一下，似乎所有的比较都是在动画的上下文中完成的，但是不相关的功能呢——比如去抖动/节流，或者只是如果你需要在重绘后运行代码？

最佳答案

RequestAnimationFrame 很好，如果你想确保你不做不必要的工作，因为你在 2 帧更新之间更改了两次。

requestAnimationFrame 本身对于动画以外的任何东西都没有用，因为它只能等待 16.666 毫秒(如果没有延迟)，因此您需要将多个链接在一起。但是，如果您将它与 setTimeout 配对，那么您将能够等待特定的毫秒数，并确保在正确的时间绘制所有内容。

关于javascript - 使用 requestAnimationFrame 而不是 setTimeout 进行去抖动/节流有什么好处，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40277945/