当前位置：首页 > JavaScript

js节流防抖实现思路

2026-03-01 21:28:58JavaScript

节流（Throttle）实现思路

节流的核心是限制函数在一定时间内只执行一次，常用于高频触发事件（如滚动、输入）。

时间戳版
通过比较当前时间与上一次执行时间差，决定是否执行函数。

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

定时器版
通过设置定时器延迟执行，确保间隔内仅触发一次。

function throttle(fn, delay) {
  let timer = null;
  return function(...args) {
    if (!timer) {
      timer = setTimeout(() => {
        fn.apply(this, args);
        timer = null;
      }, delay);
    }
  };
}

防抖（Debounce）实现思路

防抖的核心是延迟执行函数，直到事件停止触发后一段时间才执行。

js节流防抖实现思路

基础版
每次触发时重置定时器，确保连续触发时仅最后一次生效。

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

立即执行版
首次触发立即执行，后续连续触发时延迟执行。

js节流防抖实现思路

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

应用场景对比

节流适用场景

页面滚动事件（scroll）
窗口大小调整（resize）
鼠标移动（mousemove）

防抖适用场景

输入框实时搜索（input）
表单提交按钮防重复点击
自动保存功能

结合实现（增强版）

可同时支持节流和防抖的复合函数：

function enhancedThrottle(fn, delay, { leading = true, trailing = true } = {}) {
  let lastTime = 0, timer = null;
  return function(...args) {
    const now = Date.now();
    if (leading && now - lastTime >= delay) {
      fn.apply(this, args);
      lastTime = now;
    } else if (trailing) {
      clearTimeout(timer);
      timer = setTimeout(() => {
        fn.apply(this, args);
        lastTime = now;
      }, delay);
    }
  };
}