如果这样运用debounce和throttle进行节流与防抖，代码更优雅、可复用性更强！

2023-11-11 02:16:48

1. 为什么要使用节流和防抖？

在前端开发中，我们经常会遇到这样的场景：一个函数被频繁地调用，导致浏览器卡顿。这是因为浏览器的事件循环机制是单线程的，当一个函数被调用时，它会一直执行，直到执行完成，期间不会执行任何其他任务。这样一来，如果一个函数被频繁地调用，就会导致浏览器卡顿。

节流和防抖可以帮助我们解决这个问题。节流函数会限制函数的调用频率，在一定时间内只允许函数被调用一次。防抖函数则会延迟函数的执行，直到函数停止被调用一段时间后才执行。

2. Debounce和Throttle的原理和区别

2.1 Debounce

debounce函数的原理是：在一定时间内，如果函数被多次调用，那么只执行最后一次调用的函数。换句话说，debounce函数会延迟函数的执行，直到函数停止被调用一段时间后才执行。

debounce函数的实现方式有很多种，最常见的一种方式是使用定时器。当函数被调用时，会创建一个定时器，如果在定时器到期之前函数又被调用，那么就会重新设置定时器。只有当定时器到期后，函数才会执行。

2.2 Throttle

throttle函数的原理是：在一定时间内，只允许函数被调用一次。换句话说，throttle函数会限制函数的调用频率。

throttle函数的实现方式也有很多种，最常见的一种方式是使用时间戳。当函数被调用时，会记录当前时间戳。如果在下一个时间戳之前函数又被调用，那么就不会执行函数。只有当下一个时间戳到来后，函数才会执行。

2.3 区别

debounce和throttle的主要区别在于：debounce函数会延迟函数的执行，直到函数停止被调用一段时间后才执行；而throttle函数会限制函数的调用频率，在一定时间内只允许函数被调用一次。

3. Debounce和Throttle的用法

3.1 Debounce

debounce函数的用法很简单，只需要在函数前面加上debounce装饰器即可。例如：

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

function onInput(e) {
  // ...
}

const debouncedOnInput = debounce(onInput, 300);

document.getElementById('input').addEventListener('input', debouncedOnInput);

这段代码中，debounce函数接受两个参数：func是要被延迟执行的函数，wait是延迟的时间。当onInput函数被调用时，会创建一个定时器，如果在300毫秒内onInput函数又被调用，那么就会重新设置定时器。只有当300毫秒后onInput函数没有被调用，定时器才会到期，onInput函数才会执行。