什么是函数防抖
函数防抖指的是当函数被频繁触发时，只有在触发停止后的一段时间内没有再次触发，函数才会执行一次。如果在这段等待时间内又触发了函数，等待时间会重新计算。这种机制适合处理那些不需要高频执行的事件，比如输入框搜索联想、按钮防重复点击等场景，能有效减少不必要的函数执行次数，提升应用性能。
函数防抖的基础实现
基础版防抖只需要借助定时器就能实现，核心思路是每次触发函数时先清除之前的定时器，再重新设置一个新的定时器，只有等待时间内没有新触发，定时器才会回调执行目标函数。
/**
* 基础版函数防抖
* @param {Function} fn 需要防抖的目标函数
* @param {Number} delay 防抖等待时间，单位毫秒
* @returns {Function} 经过防抖处理的函数
*/
function debounce(fn, delay) {
let timer = null;
return function(...args) {
// 每次触发先清除之前的定时器
if (timer) {
clearTimeout(timer);
}
// 重新设置新的定时器
timer = setTimeout(() => {
fn.apply(this, args);
timer = null;
}, delay);
};
}带立即执行选项的进阶防抖实现
基础版防抖需要等待事件停止触发后才执行，但有些场景下我们希望第一次触发就立即执行函数，后续触发再走防抖逻辑，这时候可以给防抖函数增加一个是否立即执行的参数。
/**
* 进阶版函数防抖，支持立即执行选项
* @param {Function} fn 需要防抖的目标函数
* @param {Number} delay 防抖等待时间，单位毫秒
* @param {Boolean} immediate 是否立即执行，true为首次触发立即执行
* @returns {Function} 经过防抖处理的函数
*/
function debounce(fn, delay, immediate = false) {
let timer = null;
let isFirst = true;
return function(...args) {
if (immediate && isFirst) {
// 首次触发且需要立即执行时，直接调用函数
fn.apply(this, args);
isFirst = false;
return;
}
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(() => {
fn.apply(this, args);
// 定时器执行后重置首次触发标记，方便下次重新进入立即执行逻辑
isFirst = true;
timer = null;
}, delay);
};
}防抖的使用示例
最常见的使用场景是输入框搜索联想，用户输入过程中频繁触发输入事件，用防抖处理后在用户停止输入一段时间后再发起请求，避免频繁调用接口。
// 模拟搜索请求函数
function search(value) {
console.log('发起搜索请求，搜索关键词：', value);
}
// 创建防抖处理后的搜索函数，等待时间500毫秒
const debounceSearch = debounce(search, 500);
// 获取输入框元素，绑定输入事件
const inputEl = document.querySelector('<input type="text" placeholder="请输入搜索内容">');
inputEl.addEventListener('input', function(e) {
debounceSearch(e.target.value);
});防抖和节流的区别
防抖和节流都是优化高频触发事件的手段，但两者的执行逻辑不同：
- 防抖是等待事件停止触发后才执行一次，多次触发会重置等待时间，最终只会执行一次。
- 节流是在固定时间间隔内只执行一次，不管触发频率多高，到了间隔时间就会执行一次。
选择使用防抖还是节流，要根据实际场景判断：如果是只需要最终状态触发的场景，比如搜索联想、表单校验，用防抖更合适；如果是需要持续反馈的场景，比如页面滚动加载、鼠标移动拖拽，用节流更合适。
注意事项
使用防抖时要注意this指向的问题，上面的实现中通过apply把返回函数的this绑定到了目标函数上，避免this丢失。另外定时器的清理也很重要，如果不清除之前的定时器，可能会导致函数执行不符合预期，甚至造成内存泄漏。如果防抖函数不再使用，也要记得做相应的清理工作。
JavaScript函数防抖节流事件处理性能优化修改时间：2026-06-05 01:59:38