高铁卫生间“红绿灯”：节流防抖的妙用，提升用户体验

前端

2023-08-03 02:33:01

节流与防抖：用红绿灯巧解事件处理

在前端开发中，我们经常需要处理各种事件，比如输入、滚动、窗口大小改变等等。为了优化事件处理，提升用户体验，节流和防抖这两种技术应运而生。让我们用通俗易懂的比喻——红绿灯，来理解它们的工作原理。

节流：就像红绿灯限速

节流就像红绿灯限制车辆通行频率一样。它规定了在一定时间内，事件只能被触发一次。这意味着，即使事件被频繁触发，节流也会让它乖乖"等候"，直到红灯转绿，也就是规定的时间到了，才会执行。

举个例子： 我们在输入框搜索时，每输入一个字符就会触发一个查询请求。频繁的请求会给服务器带来巨大压力。使用节流，我们可以将请求延迟一段时间，只有当用户停止输入，红灯转绿时，才会发送请求。这样，就能有效减少请求次数，保护服务器。

防抖：延时触发，防止重复

防抖则更像红绿灯控制行人过马路。当行人按下按钮，触发红绿灯，如果在红灯变绿之前再次按下，红灯并不会重新计时。它会等到绿灯亮起，行人通过后再重新计时。

在事件处理中，防抖也是类似的。当事件频繁触发时，防抖会延迟执行回调函数。如果在延迟期间事件再次触发，防抖会重新计时，直到延迟结束才执行回调。

举个例子： 在窗口大小改变事件中，频繁触发会影响性能。使用防抖，我们可以延迟处理，直到用户停止调整窗口大小，绿灯亮起，才执行回调。这样，就能减少不必要的处理，避免性能问题。

应用场景：节流防抖大显身手

节流和防抖在各种场景中都有用武之地，比如：

输入框搜索建议： 节流查询请求，避免服务器压力。
窗口大小改变事件： 防抖处理，避免频繁触发影响性能。
滚动加载： 节流加载事件，优化页面加载速度。

实现节流防抖：方法多样

1. JavaScript 原生实现

我们可以使用原生 JavaScript 实现节流和防抖：

节流：

function throttle(func, delay) {
  let lastTime = 0;
  return function (...args) {
    const now = new Date().getTime();
    if (now - lastTime < delay) {
      return;
    }
    lastTime = now;
    func.apply(this, args);
  };
}

防抖：

function debounce(func, delay) {
  let timer = null;
  return function (...args) {
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      func.apply(this, args);
      timer = null;
    }, delay);
  };
}

2. 使用库实现

一些流行的 JavaScript 库也提供了节流和防抖功能：