JZTXT

防抖（Debounce）和节流（Throttle）的区别

发布时间 2023-06-01 11:06:21作者: 炽橙子

防抖（Debounce）和节流（Throttle）都是用于控制函数执行频率的方法，它们可以避免在某些场景下出现过多的函数调用从而减少资源消耗和提升性能。

防抖是指触发事件后，等待指定时间才执行函数。如果在这段时间内再次触发了该事件，则会重新计算延迟时间，直到在指定时间内没有再次触发该事件，才会执行函数。常见应用场景包括：按钮点击、输入框输入。

节流是指连续触发事件但是在一定时间内只执行一次函数。例如每隔一秒钟执行一次函数。常见应用场景包括：滚动事件、mousemove 事件。

两者区别主要在于执行函数的时机不同。防抖是在最后一次触发事件之后等待一段时间执行函数，而节流则是在一定时间内只执行一次函数。因此，防抖更适合处理一些需要用户稳定操作完成后的行为，如提交表单，而节流更适合处理高频率触发的事件，如鼠标移动、页面滚动等。

 

 

如果用户快速滑动页面，可能会发起多次数据请求，这会增加服务器的负担和网络流量。为了避免频繁请求数据，可以通过设置防抖或者节流来控制数据请求的频率。

实现防抖或者节流需要用到 JavaScript 中的定时器和闭包，具体步骤如下：

  1. 防抖

在需要防抖的函数外面包裹一个函数，这个包裹函数中设置一个定时器，并将需要防抖的函数作为参数传递进去。当包裹函数被触发时，先清除之前的定时器，再重新设置一个新的定时器，并在定时器到期后执行需要防抖的函数。

function debounce(fn, delay) {
  let timer = null;
  return function() {
    if (timer !== null) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      fn.apply(this, arguments);
    }, delay);
  };
}
  1. 节流

在需要节流的函数外面包裹一个函数，这个包裹函数中设置一个标志位，在一定时间内只能触发一次函数。当包裹函数被触发时，如果标志位为 true，则表示当前正在执行函数，直接返回；否则执行函数，并将标志位设置为 true，在规定时间后将标志位重置为 false。

function throttle(fn, delay) {
  let canRun = true;
  return function() {
    if (!canRun) {
      return;
    }
    canRun = false;
    setTimeout(() => {
      fn.apply(this, arguments);
      canRun = true;
    }, delay);
  };
}

需要注意的是，防抖和节流都会影响用户的交互体验，应该根据实际需求选择合适的方式来控制数据请求的频率。