核心区别

• Debounce：在事件被触发 n 秒后再执行回调，如果在这 n 秒内又被触发，则重新从新的时间开始计时 n 秒，直至连续的 n 秒没有新的触发事件发生时才会执行回调

  • immediate = true：在首次触发事件时立刻执行回调一次

• Throttle：在事件被首次触发时立刻执行回调，后续的 n 秒出现新的事件时直接忽略

应用场景

• 基于用户输入进行实时展示：debounce

• 防止用户连续点击按钮触发多个事件：throttle

• 滚动事件处理：throttle

实现代码（以 JS 为例）

Throttle

1function throttle(fn, delay) {
2  let lastTime = 0;
3  
4  return function (...args) {
5    const now = Date.now();
6    
7    if (now - lastTime >= delay) {
8      fn.apply(this, args);
9      lastTime = now;
10    }
11  };
12}

Debounce

1function debounce(fn, delay, immediate = false) {
2  let timer = null;
3  
4  return function (...args) {
5    const callNow = immediate && !timer;
6    
7    clearTimeout(timer);
8    
9    timer = setTimeout(() => {
10      timer = null;
11      if (!immediate) {
12        fn.apply(this, args);
13      }
14    }, delay);
15    
16    if (callNow) {
17      fn.apply(this, args);
18    }
19  };
20}

如果始终 immediate=false，可以简化

1function throttle(fn, delay) {
2  let timer = null;
3  
4  return function (...args) {
5    if (timer) {
6      return;
7    }
8    
9    timer = setTimeout(() => {
10      fn.apply(this, args);
11      timer = null;
12    }, delay);
13  };
14}

如果始终 immediate=true，可以简化

1function throttle(fn, delay) {
2  let timer = null;
3  
4  return function (...args) {
5    if (timer) {
6      return;
7    }
8    
9    fn.apply(this, args);
10    
11    timer = setTimeout(() => {
12      timer = null;
13    }, delay);
14  };
15}
16

补充

throttle 和 debounce(immediate=true) 有什么区别？

二者同样会立刻执行，但是在连续不停触发事件时候，throttle 保证了每隔单位时间都会触发一次，而 debounce(immediate=true) 则在后续不会再触发事件

1假设 delay = 1000ms，持续触发事件：
2
3throttle:
4时间轴: 0ms     1000ms    2000ms    3000ms
5执行:   执行     执行      执行      执行
6事件:   | | | | | | | | | | | | | | | |
7
8debounce(immediate=true):
9时间轴: 0ms     1000ms    2000ms    3000ms
10执行:   执行     (无)      (无)      (无)
11事件:   | | | | | | | | | | | | | | | |
12        ↑
13        第一次执行后，后续的触发都被忽略，直到停止触发并等待1000ms后再触发新事件才会执行