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

结合场景的选择

• 节流适用场景
  需要均匀执行的情况，如滚动加载、鼠标移动跟踪。

• 防抖适用场景
  需等待操作停止后执行的场景，如搜索输入联想、窗口大小调整。

注意事项

• 使用apply确保函数上下文（this）和参数正确传递。
• 清除定时器避免内存泄漏。
• 结合需求选择时间戳或定时器实现节流。