防抖（Debounce）"和"节流（Throttle）"是前端开发中常用于优化高频率事件触发（如 scroll、resize、input、mousemove 等）的两种技术。它们的核心目的是控制函数执行的频率，提高性能和用户体验。
一、防抖（Debounce）
定义： 一段时间内只执行最后一次操作，适合"只关心最后一次触发"的场景。
应用场景：
- 搜索框输入联想
- resize、scroll事件优化
- 表单输入校验等
例子：
js
复制编辑
function debounce(fn, delay) {
let timer = null
return function (...args) {
if (timer) clearTimeout(timer)
timer = setTimeout(() => {
fn.apply(this, args)
}, delay)
}
}
// 使用
const handleInput = debounce(e => {
console.log('用户停止输入:', e.target.value)
}, 500)二、节流（Throttle）
定义： 一定时间内只执行一次操作，适合"每隔一段时间执行一次"的场景。
应用场景：
- 页面滚动事件
- 拖拽
- 点击事件防止频繁提交
例子：
js
复制编辑
function throttle(fn, interval) {
let lastTime = 0
return function (...args) {
const now = Date.now()
if (now - lastTime >= interval) {
lastTime = now
fn.apply(this, args)
}
}
}
// 使用
const handleScroll = throttle(() => {
console.log('节流执行一次 scroll')
}, 200)总结对比：
| 特性 | 防抖（Debounce） | 节流（Throttle） |
|---|---|---|
| 执行频率 | 只在最后一次事件后执行一次 | 固定间隔执行一次 |
| 适合场景 | 搜索联想、自动保存、输入监听 | 滚动监听、拖拽、频繁点击限制 |
| 控制方式 | 定时器重置 | 时间戳或定时器 |