【Vue】防抖和节流

throttle 和 debounce 是两种常用的性能优化技术，它们虽然有相似的目的，但具体行为和应用场景有所不同。在解释是否可以使用 throttle 完成防抖（debounce）的功能之前，先简要介绍一下二者的区别和用途。

1、Throttle 和 Debounce 的区别

1.1 Throttle（节流）：

• 目的：限制函数在一段时间内的执行次数。
• 机制：确保一个函数在规定的时间间隔内最多执行一次，而忽略该时间间隔内的其他调用。
• 典型应用场景：滚动事件、窗口大小调整等需要频繁触发的事件。

1.2 Debounce（防抖）：

• 目的：确保函数在一段时间内只执行一次。
• 机制：函数在最后一次调用后，只有在一定时间间隔内没有再次触发，才会执行该函数。如果在这段时间内再次触发，则重新计时。
• 典型应用场景：用户输入搜索时，避免每次输入都触发搜索请求，而是在用户停止输入后一定时间再触发搜索。

2、简单示例

Throttle

function throttle(func, wait) {
  let timeout = null;
  return function(...args) {
    if (!timeout) {
      timeout = setTimeout(() => {
        timeout = null;
        func.apply(this, args);
      }, wait);
    }
  };
}

Debounce

function debounce(func, wait) {
  let timeout;
  return function(...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      func.apply(this, args);
    }, wait);
  };
}

3、是否可以用 throttle 实现 debounce

理论上，如果将 throttle 的等待时间设置得足够长，可以在某些情况下模拟出 debounce 的效果，但这并不是一个严格等价的替代方法，也不推荐这样做。更好的做法是直接实现或使用适合的 debounce 函数。这是因为：

• 目的不同：throttle 是为了限制频率，而 debounce 是为了确保一段时间后的唯一执行。
• 机制不同：防抖函数需要在结束连续事件后的一段时间内执行，而节流函数是在固定的间隔时间内执行。

代码演示
假设我们想防止用户频繁输入时触发多次搜索请求，就应选择 debounce 而不是 throttle。

// 使用防抖
const handleInput = debounce(function() {
  console.log('Handling input');
}, 300);

document.getElementById('searchInput').addEventListener('input', handleInput);

在这种情况下，只有当用户停止输入超过 300 毫秒，handleInput 才会被执行，这与节流行为明显不同。

4、使用现成的库

如同之前提到的，Lodash 提供了 debounce 和 throttle 两种方法：

import debounce from 'lodash/debounce';
import throttle from 'lodash/throttle';

// Debounce 防抖
const debouncedFunction = debounce(() => {
  console.log('Debounced!');
}, 300);

// Throttle 节流
const throttledFunction = throttle(() => {
  console.log('Throttled!');
}, 300);

5、总结

• Throttle 和 Debounce 有不同的应用场景和目标。
• Throttle 用于限制函数调用频率，它在规定的时间内最多执行一次。
• Debounce 用于防止重复调用，它在事件连续触发结束后的指定时间才会执行一次。
• 虽然 throttle 可以通过增加时间间隔来模仿 debounce 的某些效果，但并不推荐这种做法。直接使用专门的防抖函数会更加简洁和准确。