前端防抖节流大乱斗：万字长文帮您搞懂！

前端

2023-07-19 07:54:37

防抖与节流：解决频繁事件触发的利器

在前端开发中，我们经常会遇到这样的场景：用户疯狂点击按钮，导致短时间内触发大量无用请求。为了解决这个问题，就需要用到防抖（debounce）和节流（throttle）这两个函数。

防抖

想象一下你正在输入搜索框，每输入一个字母，搜索功能都会触发一次请求。这样一来，服务器就会被过多的请求淹没，而这些请求大部分都是无用的。

防抖函数可以帮助我们解决这个问题。它的工作原理是：在一段时间内，只触发一次函数。只要在这个时间段内，事件被触发，那么防抖函数就会重新开始计时，直到时间段结束，才会执行该函数。

使用场景：

输入框的搜索功能：用户在输入时，防抖函数会不断重新计时，直到用户停止输入一段时间后，才会触发搜索请求。
图片延迟加载：当用户滚动页面时，防抖函数会不断重新计时，直到用户停止滚动一段时间后，才会加载图片。

节流

不同于防抖，节流函数在一段时间内只触发一次函数，即使事件被触发多次。

想象一下你正在滚动页面，滚动条事件会不断触发。如果不对其进行限制，那么页面可能会因滚动过于频繁而卡顿。

节流函数可以帮助我们解决这个问题。它的工作原理是：在一段时间内，只触发一次函数。如果在时间段内事件再次触发，那么函数不会被执行。

使用场景：

滚动条事件：用户在滚动页面时，节流函数会限制滚动条事件的触发频率，防止页面因滚动过于频繁而卡顿。
窗口大小改变事件：当用户调整浏览器窗口大小时，节流函数会限制窗口大小改变事件的触发频率，防止频繁触发页面布局重新计算。

如何选择

在选择防抖或节流时，需要考虑以下几点：

事件类型： 如果是连续触发的事件，如滚动、拖动等，则使用节流更合适；如果是非连续触发的事件，如点击、提交等，则使用防抖更合适。
触发频率： 如果事件触发频率非常高，则使用节流更合适；如果事件触发频率较低，则使用防抖更合适。
响应时间： 如果需要快速响应事件，则使用防抖更合适；如果对响应时间要求不严格，则使用节流更合适。

代码示例

以下是用 JavaScript 实现防抖和节流的代码示例：

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

// 节流函数
function throttle(func, wait) {
  let lastTime = 0;
  return function(...args) {
    const now = Date.now();
    if (now - lastTime > wait) {
      lastTime = now;
      func.apply(this, args);
    }
  };
}