在前端开发中，你一定遇到过这样的场景：用户疯狂点击提交按钮、频繁缩放浏览器窗口、快速输入搜索关键词…… 这些高频触发的事件如果不加控制，会导致页面卡顿、请求泛滥，甚至直接让浏览器崩溃。
这时候，防抖（Debounce） 就是解决这类问题的 “特效药”。今天我们就从 0 到 1，把防抖的原理、实现和实战讲得明明白白。
一、什么是防抖？
防抖的核心思想：在事件被触发后，延迟一段时间再执行回调函数。如果在这段延迟时间内，事件又被触发了，就重新计时，直到最后一次触发后，延迟时间结束，才真正执行一次函数。
简单来说： “等你消停了，我再干活” 。
二、防抖解决了什么问题？
防抖主要用来优化高频触发事件的性能，常见场景有：
- 按钮提交：防止用户重复点击提交按钮，避免重复发送请求。
- 搜索框输入：用户输入时，等输入结束后再发送搜索请求，减少请求次数。
- 窗口 resize/scroll：避免频繁触发布局计算，提升页面流畅度。
- 鼠标移动：防止 mousemove 事件高频触发，降低计算压力。
三、手写一个基础版防抖函数
了解完最基础的是什么和有什么用处后，我们一起来手搓一个防抖函数，先从最简单的版本开始，一步步拆解防抖的实现逻辑。
首先我们先创建一个按钮，按下按钮后会在控制台打印‘提交’。
<button id="btn">提交</button>
<script>
const btn = document.getElementById('btn')
btn.addEventListener('click', handle)
function handle() {
console.log('提交');
}
</script>
这样我们就实现了最基础的按下按钮，在控制台打印提交的效果。
为了防止用户频繁重复点击按钮，造成多次重复打印结果，我们手写一个函数debounce来避免这种情况。用户重复点击多次后，只在一秒后执行最后一次点击的打印效果。
将handle函数和时间1s传进去，就可以得到：
<button id="btn">提交</button>
<script>
const btn = document.getElementById('btn')
btn.addEventListener('click', debounce(handle,1000))
function handle() {
console.log('提交');
}
</script>
在'click'后面，我们将debounce函数调用且将handle函数与时间作为参数传了进去，根据addEventListener函数的使用规则，'click'后面应该是一个函数体，而不是函数的调用，所以debounce函数体内必然返回了一个函数。
为了实现用户重复点击多次后，只在一秒后执行最后一次点击的打印效果，我们可以利用setTimeout()、clearTimeout()和闭包的特性来做到。
核心代码：
function debounce(fn, wait) {
var timer;// 用来存储定时器ID
return function (...arg) { // 鼠标每次点击触发的是我
// 每次触发事件，先清除之前的定时器
clearTimeout(timer)
// 重新设置一个新的定时器，延迟 wait 毫秒后执行函数
timer = setTimeout(() => {
// 用 apply 绑定 this 和参数，保证函数执行上下文和参数正确
fn.apply(this, arg)
}, wait)
}
}
解析：
-
let timer;：在闭包中声明一个变量，用来保存定时器的 ID，实现 “记忆” 功能。 -
clearTimeout(timer);：每次事件触发，先清除上一次的定时器，相当于 “重新计时”。 -
setTimeout(...)：创建新的定时器，延迟wait毫秒后执行目标函数fn。 -
fn.apply(this, args)：用apply方法，把当前的this指向和事件参数传递给原函数，保证函数执行时的上下文和原生事件一致。
效果：当你疯狂点击按钮时，控制台不会立刻打印 “提交成功”，而是会在你最后一次点击后，等待 1 秒才输出一次。完美避免了重复提交！
注意：
- this指向问题：防抖函数返回的是一个新函数，如果不用 apply/call 绑定 this，原函数的 this 会指向 window（严格模式下为 undefined），导致业务逻辑出错。
- 参数传递问题：用
...args收集所有参数，再通过apply传递给原函数，保证事件对象等参数能正常使用。
四、总结
防抖是前端性能优化的基础技能，核心就是 “延迟执行 + 重新计时”。
- 适用场景：高频触发、只关心最后一次结果的事件（如搜索输入、按钮提交）。
- 核心优势：减少不必要的函数执行，提升页面性能和用户体验。
- 实现关键：利用闭包保存定时器 ID，通过
clearTimeout和setTimeout控制函数执行时机。
下次再遇到用户疯狂点击按钮、频繁输入搜索的场景，别忘了掏出你的防抖 “特效药” 哦！💊
