当前位置：首页 > JavaScript

JS节流和防抖的实现

2026-01-31 10:10:20JavaScript

节流（Throttle）的实现

节流是指在一定时间间隔内，函数最多执行一次。常用于限制高频事件的触发频率，如滚动事件、窗口调整等。

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

使用时间戳实现，确保在延迟时间内不会重复执行。最后一次调用如果在时间间隔内会被忽略。

定时器版本实现：

JS节流和防抖的实现

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

防抖（Debounce）的实现

防抖是指触发高频事件后，函数在指定延迟后执行，若在延迟期间再次触发则重新计时。常用于输入框实时搜索。

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

基础版本会在延迟结束时执行最后一次调用。如果需要立即执行第一次调用，后续延迟可采用以下实现：

JS节流和防抖的实现

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