前端 | debounce 防抖 vs 节流（throttle）
重点知识点：
- 防抖，最后一次操作后等待执行，用于输入框、缩放等；
- 节流，每隔一定时间间隔执行，用于页面滚动、鼠标移动、频繁点击。
🔍 debounce vs throttle（节流）
| 功能 | debounce（防抖） | throttle（节流） |
|---|---|---|
| 触发时机 | 最后一次操作结束后等待执行 | 每隔一定时间间隔执行一次 |
| 适用场景 | 输入框、缩放等，操作停止后才执行 | 页面滚动、鼠标移动、频繁点击等 |
目录
🔍 debounce vs throttle（节流）
什么是 debounce（防抖）？
🎯 使用场景举例：
🚀 示例演示（类比）
⚙️ 技术解释
💻 代码演示（无工具版）：
🔧 更专业的写法（使用 lodash.debounce）
安装：
使用：
🔍 debounce vs throttle（节流）
想深入了解？
什么是 debounce（防抖）？
防抖（debounce）是一种控制函数触发频率的技术，核心思想是：
💡「等用户操作停止一段时间后，再执行函数。」
🎯 使用场景举例：
| 场景 | 说明 |
|---|---|
| 搜索框输入自动联想 | 用户输入完才去请求搜索接口，否则每敲一个字就请求一次，太频繁 |
| 页面缩放 / 窗口 resize 事件 | 用户不断调整窗口，停止调整后再处理 |
| 表单验证 | 用户停止输入再验证，避免频繁调用接口 |
🚀 示例演示（类比）
| 用户输入 | 触发时间 |
|---|---|
| 输入「A」 | 暂不执行，等待 500ms |
| 100ms 后输入「AB」 | 计时重置，等待 500ms |
| 100ms 后输入「ABC」 | 再次重置，等待 500ms |
| 停止输入 500ms | ✅ 执行函数（如发请求） |
⚙️ 技术解释
debounce 防抖逻辑：
- 每次触发事件时，清除上一次的定时器。
- 重新设定一个定时器，等待指定时间后执行。
- 如果在等待期间又触发了事件，重置等待时间。
💻 代码演示（无工具版）：
let timer: number | undefined
function debounceFn() {
clearTimeout(timer)
timer = setTimeout(() => {
console.log('✅ 停止触发后执行')
}, 500)
}
每次调用 debounceFn()，都会重置计时器，只有停止触发 500ms 后才执行。
🔧 更专业的写法（使用 lodash.debounce）
lodash 是常用的工具库，提供了 debounce 方法，简单易用。
安装：
npm install lodash
使用：
import debounce from 'lodash/debounce'
const logInput = debounce(() => { console.log('用户停止输入后执行') }, 500)
🔍 debounce vs throttle（节流）
| 功能 | debounce（防抖） | throttle（节流） |
|---|---|---|
| 触发时机 | 最后一次操作结束后等待执行 | 每隔一定时间间隔执行一次 |
| 适用场景 | 输入框、缩放等，操作停止后才执行 | 页面滚动、鼠标移动、频繁点击等 |
想深入了解？
考虑：演示一个防抖 vs 非防抖 的 Vue3 示例，或者想看看 lodash.debounce 的完整应用场景