JS节流和防抖的实现

节流（Throttle）的实现

节流确保函数在指定时间间隔内最多执行一次，适用于高频触发但需要限制执行频率的场景，如滚动事件。

时间戳版本
通过比较当前时间与上一次执行时间决定是否触发：

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

定时器版本
利用定时器延迟执行，确保间隔内仅有一个待执行任务：

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

防抖（Debounce）的实现

防抖在连续触发时重置计时，直到停止触发后延迟执行，适用于输入框搜索联想等场景。

基础版本
延迟执行函数，若重复触发则清除旧定时器：

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

立即执行版本
首次触发立即执行，后续触发需等待延迟：

function debounce(fn, delay, immediate = false) {
  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);
  };
}

使用场景对比

• 节流：适用于规律性限制执行频率，如窗口调整、滚动事件。
• 防抖：适用于连续触发后只需最终结果，如输入验证、搜索建议。

两种方法均可通过闭包保存状态，注意this绑定和参数传递。实际开发中可结合需求选择或使用Lodash等库的优化实现。