你还没学会防抖和节流？让我带你三分钟速通

2024-12-06 135 阅读2分钟

防抖

防抖是指在某个事件发生后，等待一定时间，如果在这段时间内该事件再次触发，则重新计时。只有在事件停止触发一段时间后，才会执行一次事件处理函数。

说简单点。防抖就是防抖就是单位时间内，频繁触发事件，只执行最后一次

适用场景：

输入框实时搜索：用户输入时，只有在停止输入后才会发送请求。
窗口调整大小：只有当窗口大小调整停止后，才执行调整操作。
按钮点击防止多次提交：防止用户多次点击按钮。

示例代码（防抖）：

let timer = null;

function debounce(fn, delay) {
  return function() {
    if (timer) {
      clearTimeout(timer); // 清除上一个定时器
    }
    timer = setTimeout(() => {
      fn();
    }, delay);
  };
}

工作原理：

每当事件触发时，首先清除之前的定时器。
然后重新设置一个新的定时器，延迟一定时间后执行函数。
如果事件再次触发，定时器会被清除，重新开始计时，直到事件停止触发一段时间后才执行。

2. 节流（Throttle）

节流是指在某个事件频繁触发时，规定在一定时间内只能触发一次事件处理函数，即使事件继续触发，也不会在规定时间内再次调用。

说简单点，节流就像王者的回城，你按了回城，在你回到水晶之前继续回城就没有作用。

适用场景：

滚动事件：监听页面滚动时，避免频繁执行滚动处理操作。
窗口大小变化：在窗口大小变化时，限制调整频率。
动画帧：限制动画的执行频率，避免不必要的计算。

示例代码（节流）：

let lastTime = 0;

function throttle(fn, delay) {
  return function() {
    const currentTime = Date.now();
    if (currentTime - lastTime >= delay) {
      lastTime = currentTime;
      fn();
    }
  };
}

工作原理：

每次事件触发时，计算当前时间与上次执行的时间差。
如果时间差大于或等于设定的延迟时间，才会执行函数。
否则，事件会被忽略，直到时间间隔满足条件。