前端 | 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 防抖逻辑：

1. 每次触发事件时，清除上一次的定时器。
2. 重新设定一个定时器，等待指定时间后执行。
3. 如果在等待期间又触发了事件，重置等待时间。

---

代码演示（无工具版）：

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 的完整应用场景