防抖通过延迟执行函数并取消未完成的调用，确保高频事件仅在停止触发后执行一次。使用setTimeout和clearTimeout控制时机，可优化搜索、滚动等场景性能。支持立即执行模式，首次触发即运行，之后需等待冷却期结束。
函数防抖（Debounce）是一种优化高频率执行函数的手段，常用于避免在短时间内重复触发某操作，比如窗口滚动、输入框搜索、按钮重复点击等场景。其核心思想是：当事件被频繁触发时，只执行最后一次操作，而前面的操作会被取消。
函数防抖的基本定义
函数防抖指的是，在函数被触发后延迟一段时间执行，如果在这段时间内再次被调用，则重新开始计时。只有当连续调用的间隔超过设定的等待时间时，函数才会真正执行一次。
实现防抖的关键是使用 setTimeout 和 clearTimeout 来控制函数的执行时机。
手写一个通用的防抖函数
下面是一个典型的 JavaScript 防抖函数实现：
function debounce(func, wait) { let timeout; return function executedFunction(...args) { const later = () => { clearTimeout(timeout); func.apply(this, args); }; clearTimeout(timeout); timeout = setTimeout(later, wait); }; }代码说明：
- func：需要防抖的实际执行函数。
- wait：延迟执行的时间（毫秒）。
- timeout：保存定时器的引用，用于清除上一次未执行的定时任务。
- 每次函数被调用时，都会清除之前的定时器，并重新设置一个新的定时器。
- 使用 apply(this, args) 保证原函数的 this 指向和参数正确传递。
如何使用防抖函数
以输入框实时搜索为例，我们希望用户停止输入500毫秒后再发起请求：
const searchInput = document.getElementById('search'); function handleSearch(event) { console.log('搜索关键词:', event.target.value); } const debouncedSearch = debounce(handleSearch, 500); searchInput.addEventListener('input', debouncedSearch);
这样，用户在输入过程中不会频繁触发搜索，只有在停止输入半秒后才会执行一次搜索请求，大大减少性能消耗和服务器压力。
立即执行模式的防抖（立即触发一次）
有时我们希望第一次触发立刻执行，然后在冷却期内不响应，直到停止触发后才允许下一次立即执行。可以扩展防抖函数支持该模式：
function debounce(func, wait, immediate) { let timeout; return function executedFunction(...args) { const context = this; const later = () => { timeout = null; if (!immediate) func.apply(context, args); }; const callNow = immediate && !timeout; clearTimeout(timeout); timeout = setTimeout(later, wait); if (callNow) func.apply(context, args); }; }当 immediate 为 true 时，函数会在第一次触发时立即执行，后续在 wait 时间内不会再次执行。
基本上就这些。函数防抖不复杂但容易忽略细节，掌握它对提升前端性能非常有帮助。
