当前位置：首页 > JavaScript

js 实现防抖

2026-01-30 23:40:46JavaScript

防抖的概念

防抖（Debounce）是一种优化高频触发事件的技术，确保事件在停止触发后的指定时间内只执行一次。常用于输入框搜索、窗口大小调整等场景。

js 实现防抖

基础实现

使用定时器延迟执行函数，若在延迟期间再次触发，则清除之前的定时器重新计时：

js 实现防抖

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 (immediate && !timer) {
      func.apply(this, args);
    }
    clearTimeout(timer);
    timer = setTimeout(() => {
      timer = null;
      if (!immediate) {
        func.apply(this, args);
      }
    }, delay);
  };
}

取消功能扩展

增加取消延迟执行的方法：

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

使用示例

const searchInput = document.getElementById('search');
const debouncedSearch = debounce(function(e) {
  console.log('Search value:', e.target.value);
}, 500);

searchInput.addEventListener('input', debouncedSearch);

// 需要取消时
// debouncedSearch.cancel();