【JS】防抖（debounce）和节流（throttle）

前端小白佬2025-06-08 11:15

1. debounce（防抖）

原理

debounce 的核心思想是：事件被触发后，等一段时间（比如300ms）没有再触发时，才执行一次函数。如果在这段时间内又触发了事件，则重新计时。

场景举例

输入框搜索：用户输入时不马上请求接口，等停止输入一段时间后才发送请求，避免频繁调用接口。
调整窗口大小：窗口尺寸变化频繁，只在调整停止后执行一次重绘。

📝debounce 手写实现

javascript 复制代码

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

解析

timer 用来保存当前计时器。
每次触发函数时，先清除旧的计时器。
设置新的计时器，延迟 delay 毫秒后执行目标函数 func。
apply(this, args) 保持调用时的上下文和参数。

2. throttle（节流）

原理

throttle 的核心思想是：保证在一个固定时间间隔内，函数最多执行一次。即使触发事件很多，函数调用频率也会被限制。

场景举例

滚动加载：监听滚动事件时，不想频繁调用函数，节省性能。
按钮连续点击防止多次提交。

📝throttle 手写实现

ini 复制代码

function throttle(func, interval) {
  let lastTime = 0;
  return function(...args) {
    const now = Date.now();
    if (now - lastTime >= interval) {
      lastTime = now;
      func.apply(this, args);
    }
  };
}

解析

lastTime 记录上一次执行函数的时间戳。
当前时间 now 减去 lastTime 大于等于间隔时，执行函数，并更新时间戳。
其他触发在这段时间内的调用都会被忽略。

总结对比

特点	debounce	throttle
执行时机	停止触发后执行一次	固定时间间隔内执行一次
适用场景	输入框搜索，窗口调整等停止触发才执行	滚动监听，按钮点击限制等频率限制
触发次数	最后一次触发执行	按时间间隔执行