js中防抖和节流实现

防抖（Debounce）实现

防抖的核心思想是在事件触发后延迟执行回调函数，若在延迟期间再次触发事件，则重新计时。适用于输入框搜索、窗口大小调整等场景。

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

使用示例：

const handleSearch = debounce(() => {
  console.log('Search triggered');
}, 500);

inputElement.addEventListener('input', handleSearch);

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

组合版本（首尾都执行）：

function throttle(func, delay) {
  let timer = null;
  let lastTime = 0;
  return function(...args) {
    const now = Date.now();
    const remaining = delay - (now - lastTime);
    if (remaining <= 0) {
      if (timer) {
        clearTimeout(timer);
        timer = null;
      }
      func.apply(this, args);
      lastTime = now;
    } else if (!timer) {
      timer = setTimeout(() => {
        func.apply(this, args);
        timer = null;
        lastTime = Date.now();
      }, remaining);
    }
  };
}

使用示例：

const handleScroll = throttle(() => {
  console.log('Scroll event handled');
}, 200);

window.addEventListener('scroll', handleScroll);

关键区别

防抖在连续触发时只执行最后一次，节流在固定时间间隔内必定执行一次。实际选择取决于具体场景需求。