当前位置：首页 > JavaScript

js中防抖和节流实现

2026-04-05 02:27:51JavaScript

防抖（Debounce）

防抖的核心思想是在事件触发后，等待一定时间间隔（如 n 毫秒）再执行回调。如果在这段时间内事件再次被触发，则重新计时。

基础实现：

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

应用场景：

搜索框输入联想（避免频繁请求）
窗口大小调整事件（避免频繁计算布局）

立即执行版本：

js中防抖和节流实现

function debounceImmediate(func, delay, immediate = true) {
  let timeoutId;
  return function(...args) {
    const context = this;
    const callNow = immediate && !timeoutId;
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
      timeoutId = null;
      if (!immediate) func.apply(context, args);
    }, delay);
    if (callNow) func.apply(context, args);
  };
}

节流（Throttle）

节流的核心思想是在固定时间间隔（如 n 毫秒）内只执行一次回调，无论事件触发多少次。

时间戳实现：

js中防抖和节流实现

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

定时器实现：

function throttle(func, limit) {
  let timeoutId;
  return function(...args) {
    if (!timeoutId) {
      timeoutId = setTimeout(() => {
        func.apply(this, args);
        timeoutId = null;
      }, limit);
    }
  };
}

结合版本（首尾均执行）：

function throttle(func, limit) {
  let timeoutId, lastTime = 0;
  return function(...args) {
    const now = Date.now();
    const remaining = limit - (now - lastTime);
    if (remaining <= 0) {
      if (timeoutId) {
        clearTimeout(timeoutId);
        timeoutId = null;
      }
      func.apply(this, args);
      lastTime = now;
    } else if (!timeoutId) {
      timeoutId = setTimeout(() => {
        func.apply(this, args);
        lastTime = Date.now();
        timeoutId = null;
      }, remaining);
    }
  };
}

应用场景：