❤ 写在前面
如果觉得对你有帮助的话，点个小❤❤ 吧，你的支持是对我最大的鼓励~
个人独立开发wx小程序，感谢支持！
引言：为什么需要它们？
想象一下，你在搜索框中每输入一个字母，页面就疯狂地向服务器发送请求；或者你疯狂地滚动页面，触发了无数次的滚动事件处理函数…这不仅会让用户体验变差，还可能让服务器崩溃！这时，防抖和节流就登场了——它们是控制函数执行频率的两位“超级英雄”。
生活比喻：更容易理解的概念
📦 防抖 (Debounce) — “电梯关门原理”
想象你在等电梯：当第一个人进入电梯后，电梯门开始关闭（计时开始）。如果在这期间又有人进来，电梯会重新开始关门计时。只有当一段时间内没有人再进入，电梯门才会真正关闭并开始运行。
核心思想：事件触发后，等待一段时间再执行，如果在这期间再次触发，则重新计时。
💧 节流 (Throttle) — “水龙头滴水原理”
想象一个调节过的水龙头：无论你怎么拧开关，水都以固定的频率一滴一滴地流出，不会因为你的快速操作而改变流速。
核心思想：在一定时间内，无论事件触发多少次，只执行一次。
技术对比：一目了然的区别
核心区别对比表
| 特性 | 防抖 (Debounce) | 节流 (Throttle) |
|---|---|---|
| 执行时机 | 最后一次触发后等待一段时间执行 | 固定时间间隔执行 |
| 重新触发的影响 | 重新计时 | 不影响固定间隔 |
| 类比 | 电梯关门 | 水龙头滴水 |
| 适用场景 | 搜索框输入、窗口调整 | 滚动事件、按钮点击 |
实战代码：手把手实现
基础防抖实现
functiondebounce(func,wait){lettimeout;returnfunction(...args){// 清除之前的计时器clearTimeout(timeout);// 设置新的计时器timeout=setTimeout(()=>{func.apply(this,args);},wait);};}// 使用示例：搜索框输入constsearchInput=document.getElementById('search');constsearchFunc=()=>{console.log('发送搜索请求:',searchInput.value);};searchInput.addEventListener('input',debounce(searchFunc,500));基础节流实现
functionthrottle(func,wait){letlastTime=0;lettimeout;returnfunction(...args){constnow=Date.now();constremaining=wait-(now-lastTime);if(remaining<=0){// 已经超过等待时间，立即执行lastTime=now;func.apply(this,args);}};}// 使用示例：滚动加载更多window.addEventListener('scroll',throttle(()=>{console.log('检查是否需要加载更多内容...');},200));进阶版本：功能更全面
带立即执行选项的防抖
functiondebounceAdvanced(func,wait,immediate=false){lettimeout;returnfunction(...args){constcontext=this;constlater=()=>{timeout=null;if(!immediate)func.apply(context,args);};constcallNow=immediate&&!timeout;clearTimeout(timeout);timeout=setTimeout(later,wait);if(callNow){func.apply(context,args);}};}带取消功能的节流
functionthrottleAdvanced(func,wait){letlastTime=0;lettimeout;constthrottled=function(...args){constcontext=this;constnow=Date.now();constremaining=wait-(now-lastTime);if(remaining<=0){if(timeout){clearTimeout(timeout);timeout=null;}lastTime=now;func.apply(context,args);}elseif(!timeout){timeout=setTimeout(()=>{lastTime=Date.now();timeout=null;func.apply(context,args);},remaining);}};throttled.cancel=()=>{clearTimeout(timeout);timeout=null;};returnthrottled;}真实场景应用
🛒 场景一：电商搜索框（防抖）
// 用户输入时，只在停止输入500ms后发送请求constsearchProduct=debounce((keyword)=>{fetch(`/api/search?q=${keyword}`).then(response=>response.json()).then(products=>{// 更新搜索结果updateSearchResults(products);});},500);searchInput.addEventListener('input',(e)=>{searchProduct(e.target.value);});🖱️ 场景二：防止按钮重复点击（节流）
// 用户疯狂点击提交按钮，但每2秒只处理一次constsubmitOrder=throttle(()=>{console.log('提交订单请求发送...');// 发送订单请求},2000);submitButton.addEventListener('click',submitOrder);🎮 场景三：游戏射击（节流）
// 游戏角色开枪，无论玩家多快点击，枪都有冷却时间constshoot=throttle(()=>{console.log('发射子弹！');createBullet();playShootSound();},300);// 每300ms只能发射一次fireButton.addEventListener('click',shoot);📱 场景四：无限滚动加载（节流）
// 滚动时检查位置，但不要太频繁constcheckScrollPosition=throttle(()=>{constscrollTop=window.pageYOffset;constwindowHeight=window.innerHeight;constdocumentHeight=document.documentElement.scrollHeight;// 距离底部100px时加载更多if(documentHeight-(scrollTop+windowHeight)<100){loadMoreContent();}},200);window.addEventListener('scroll',checkScrollPosition);现代前端框架中的使用
React Hooks 版本
import{useCallback,useRef}from'react';// 防抖HookfunctionuseDebounce(callback,delay){consttimeoutRef=useRef();returnuseCallback((...args)=>{if(timeoutRef.current){clearTimeout(timeoutRef.current);}timeoutRef.current=setTimeout(()=>{callback(...args);},delay);},[callback,delay]);}// 节流HookfunctionuseThrottle(callback,delay){constlastRun=useRef(0);returnuseCallback((...args)=>{constnow=Date.now();if(now-lastRun.current>=delay){callback(...args);lastRun.current=now;}},[callback,delay]);}// 在组件中使用functionSearchComponent(){const[query,setQuery]=useState('');consthandleSearch=useDebounce((searchTerm)=>{// 发送搜索请求fetchResults(searchTerm);},500);return(<input value={query}onChange={(e)=>{setQuery(e.target.value);handleSearch(e.target.value);}}/>);}Vue 3 版本
<template> <input v-model="searchText" @input="handleSearch" /> </template> <script setup> import { ref } from 'vue'; import { debounce } from 'lodash-es'; // 或使用自定义实现 const searchText = ref(''); const searchResults = ref([]); const handleSearch = debounce(async () => { const response = await fetch(`/api/search?q=${searchText.value}`); searchResults.value = await response.json(); }, 500); </script>性能小贴士与陷阱
✅ 最佳实践
- 选择合适的等待时间：防抖通常300-500ms，节流通常16-200ms（根据60fps计算）
- 考虑使用requestAnimationFrame：对于动画相关的节流，使用
requestAnimationFrame性能更好 - 及时清理：组件卸载时，记得取消定时器
❌ 常见陷阱
// 错误：每次渲染都创建新的防抖函数functionComponent(){// 这样每次渲染都会创建新的debounce实例consthandleInput=debounce(()=>{// ...},500);return<input onChange={handleInput}/>;}// 正确：使用useRef或useCallback保持引用functionComponent(){consthandleInputRef=useRef(debounce(()=>{// ...},500));return<input onChange={handleInputRef.current}/>;}工具库推荐
不想自己实现？这些库已经帮你做好了：
- Lodash：
.debounce()和.throttle()函数功能强大 - Underscore：同样有优秀的实现
- RxJS：响应式编程方式处理事件流
测试你的理解
小测验：
- 用户连续快速调整窗口大小，应该用防抖还是节流？
- 搜索框实时显示搜索结果建议，应该用哪种？
- 射击游戏中角色的射击功能，应该用哪种？
答案：1.防抖（等待调整结束） 2.防抖（等待输入暂停） 3.节流（固定射击频率）
总结
防抖和节流是前端开发中必备的性能优化技巧。记住这个简单的规则：
- 防抖：等待“最后一个”操作完成
- 节流：保持“固定频率”执行
掌握它们不仅能提升应用性能，还能提供更流畅的用户体验。现在，去你的项目中找找看哪些地方可以用上这两个技巧吧！
互动时间：你在项目中用过防抖或节流吗？遇到过什么有趣的问题或挑战？欢迎在评论区分享你的经验！👇
