JS节流和防抖的实现

节流（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;
    }
  };
}

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

定时器版本实现：

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);
  };
}

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

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);
  };
}

差异与应用场景

节流保证在固定间隔执行，适用于连续触发但需要均匀执行的情况，如滚动加载。

防抖在连续触发后只执行一次，适用于高频触发但只需最终结果的场景，如搜索框输入联想。

两者均可通过闭包保存状态，核心区别在于时间控制逻辑：节流是“固定周期”，防抖是“重置延迟”。