防抖与节流
防抖与节流：Vue3+TS 实战指南
作为一个常被产品经理吐槽"页面卡成PPT"的程序员，今天带你彻底掌握两个让页面飞起来的神器：节流（Throttle） 和 防抖（Debounce）。本文使用 Vue3 + TypeScript + Vite + VueUse 实战演示，无需造轮子，直接上手！
一、为什么页面会卡顿？
先看两个典型场景：
搜索框场景
用户每输入一个字母就发起请求，输入"前端开发"（4字）触发 8 次请求 → 服务器压力巨大
滚动加载场景
用户滚动鼠标时，代码疯狂计算，页面卡顿如PPT
解决方案：节流和防抖就像"交通管理员"，精准控制请求频率，让页面丝滑如丝绸。
二、核心区别
🧠 核心区别：执行时机不同
| 特性 | 防抖 (Debounce) | 节流 (Throttle) |
|---|---|---|
| 执行时机 | 最后一次触发后等待一段时间才执行 | 每隔一段时间执行一次 |
| 执行次数 | 无论触发多少次，最终只执行1次 | 每个时间间隔内最多执行1次 |
| 触发逻辑 | "等你停手了，我再行动" | "按固定频率执行，拒绝插队" |
| 典型比喻 | 电梯关门：最后一个人进来后3秒关门 | 地铁发车：每5分钟一班，必须等5分钟 |
💡 关键理解：
防抖关注"最终结果"，节流关注"执行频率"
（搜索要结果，滚动要过程）
三、场景选择
| 场景 | 推荐方式 | 为什么？ | 实际案例 |
|---|---|---|---|
| 搜索框输入 | ✅ 防抖 | 用户输入结束再请求，避免无效请求 | 电商网站搜索框 |
| ** |
版权声明：
本站所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自
coderczh！
喜欢就支持一下吧
打赏
微信
支付宝
微信
支付宝