JavaScript中的定时控制-Throttle、Debounce、Immediate的基本概念

Throttle

在现代浏览器中，帧速率为60fps是流畅性能的目标，给定我们16.7ms的时间预算用于响应一些事件所有需要的更新。这样可以推断，如果每秒发生n个事件并且回调执行，需要t秒的时间，为了流畅运行，

1 / n >= t

如果t以毫秒为单位，

1000 / n >= t

如果你曾经使用mousemove事件，你会知道产生mousemove事件的数量每秒可以超过60次。如果我们的回调需要超过16.7ms，那就开始凌乱了。

1. var then = 0;
2.  
3. function log() {
4. var now = Date.now();
5. if (1000 / (now - then) > 60) {
6. console.log('It\'s over 9000!!!');
7. }
8. then = now;
9. }
10.  
11. window.onmousemove = log;

实现

Throttle 允许我们限制我们激活响应的数量。我们可以限制每秒回调的数量。反过来，也就是说在激活下一个回调之前要等待多少时间;

1. var delta = 1000;
2. var then = 0;
3.  
4. function log() {
5. console.log('foo');
6. }
7.  
8. function throttledLog() {
9. var now = Date.now();
10. if (now - then >= delta) {
11. log();
12.  
13. then = now;
14. }
15. };
16.  
17. window.onmousemove = throttledLog;

我们可以用 fps替换delta，并推断出不同的代码。

1. var fps = 60;
2. ...
3. function throttledLog() {
4. var now = Date.now();
5. if (1000 / (now - then) < = fps) {
6. log();
7.  
8. then = now;
9. }
10. };
11.  
12. window.onmousemove = throttledLog;

我们也可以通过使用setTimeout来实现相同的结果。 但是，不是检查时间差，而是检查状态变化。

第一次，我们可以安全地激活回调。一旦完成，只有在等待 delta 时间之后才能再次激活回调。

1. var delta = 1000;
2. var safe = true;
3.  
4. function log() {
5. console.log('foo');
6. }
7.  
8. function throttledLog() {
9. if (safe) {
10. log();
11.  
12. safe = false;
13. setTimeout(function() {
14. safe = true;
15. }, delta);
16. }
17. };
18.  
19. window.onmousemove = throttledLog;

Debounce

这个术语-去抖动 来自电子学的领域，手动开关输入的信号被发送到数字电路中。在电子学中，当你按一个物理按钮一次，数字电路可能读到多个按压，因为按钮的物理属性（金属触点，弹簧，磨损件等）。

去抖动意味着采集到的所有这些波动的信号，并把它们当作一个。

例子

一个简单的例子已经存在于JS中：keydown vs keyup。假设您正在处理一个项目，并且需要输入内容。但是你想要每次敲击键盘得到一个字符。输入时，如果长按一个键，keydown事件将连续被触发，但是 keyup 事件只有在按键被释放时才会触发。

1. window.onkeyup = function() {
2. console.log('onkeyup');
3. }
4.  
5. window.onkeydown = function() {
6. console.log('onkeydown');
7. }

这种行为上的差异对于确定输入是否已完成是有用的。在示例场景中，它是你将使用的keyup事件。在某种程度上，我们可以说keydown 是原始输入，keyup 是去抖动输入。

实现

当事件发生时，我们不会立即激活回调。相反，我们等待一定的时间并检查相同的事件是否再次触发。如果是，我们重置定时器，并再次等待。如果在等待期间没有发生相同的事件，我们就立即激活回调。

1. var delta = 1000;
2. var timeoutID = null;
3.  
4. function log() {
5. console.log('foo');
6. }
7.  
8. function debouncedLog() {
9. clearTimeout(timeoutID); // reset timer
10. timeoutID = setTimeout(function() {
11. // wait for some time
12. // and check if event happens again
13. log();
14. }, delta);
15. };
16.  
17. window.onkeydown = debouncedLog;

Immediate

Immediate是Debounce的精确版本。比起 Debounce 的 等待后续事件触发，然后再激活回调，Immediate 是 立即激活回调，然后等待后续事件在一定时间内触发。

实现

就像Throttle的情况一样，我们需要一个状态变量来检查是否应该激活我们的回调。我们在Debounce不需要一个，因为timeoutID隐式管理这部分。

1. var delta = 1000;
2. var timeoutID = null;
3. var safe = true;
4.  
5. function log() {
6. console.log('foo');
7. }
8.  
9. function immediatedLog() {
10. if (safe) {
11. log();
12. safe = false;
13. }
14.  
15. clearTimeout(timeoutID);
16. timeoutID = setTimeout(function() {
17. safe = true;
18. }, delta);
19. };
20.  
21. window.onkeydown = immediatedLog;
22. //转载至 http://www.css88.com/archives/6589