一招教你识破防抖和节流的本质差别，选对方法事半功倍

2023-09-29 15:23:25

在前端开发中，我们经常会遇到需要对用户输入或事件做出响应的情况。例如，在搜索框中输入内容时，我们希望实时显示搜索结果；在滚动页面时，我们希望动态加载更多内容。但是，如果我们对每个事件都执行相同的处理函数，可能会导致性能问题，尤其是在事件频繁发生的情况下。

为了解决这个问题，我们可以使用防抖或节流技术来优化事件处理。防抖和节流都是函数装饰器，它们可以控制函数的执行频率，从而避免不必要的重复调用。

防抖

防抖函数会将连续多次触发的事件合并为一次执行。也就是说，当事件在一定时间间隔内多次触发时，防抖函数只会在最后一个事件触发后执行一次处理函数。

防抖函数的实现通常如下：

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

在上面的代码中，func是需要执行的处理函数，wait是防抖的等待时间，单位是毫秒。当事件触发时，防抖函数会立即清除之前的定时器，然后启动一个新的定时器。如果在定时器到期之前再次触发事件，则会再次清除定时器并启动一个新的定时器。这样，处理函数只会在最后一个事件触发后wait毫秒后执行一次。

节流

节流函数会限制函数在一定时间间隔内只能执行一次。也就是说，当事件在一定时间间隔内多次触发时，节流函数只会在第一次触发事件时执行处理函数，然后在接下来的时间间隔内忽略所有后续事件。

节流函数的实现通常如下：

function throttle(func, wait) {
  let lastCallTime = 0;
  return function() {
    let context = this;
    let args = arguments;
    let now = Date.now();
    if (now - lastCallTime >= wait) {
      func.apply(context, args);
      lastCallTime = now;
    }
  };
}