深入理解前端防抖（Debounce）与节流（Throttle）：原理、区别与实战示例_throttle 节流 leading trailing
深入理解前端防抖（Debounce）与节流（Throttle）：原理、区别与实战示例
📌 引言
在前端开发中，我们经常需要处理高频事件（如输入框输入、滚动、窗口调整大小等）。如果不加限制，浏览器会频繁触发回调函数，导致性能问题，甚至页面卡顿。
防抖（Debounce） 和 节流（Throttle） 是两种优化方案，可以有效控制事件触发的频率，提高应用的性能和用户体验。
本篇文章将详细解析 防抖和节流的原理、适用场景及代码实现，帮助你更好地优化前端应用。
1. 什么是防抖（Debounce）？
📝 概念
防抖是一种在事件触发后延迟执行的技术，如果在延迟期间事件被再次触发，计时器会重置，重新计算延迟时间。
核心思想：短时间内多次触发，只执行最后一次。
📌 适用场景
- 搜索框输入（防止用户每次输入都发送请求）
- 窗口调整大小（resize）（防止短时间内多次触发计算）
- 表单输入验证（用户停止输入后再进行验证）
✅ 代码实现
function debounce(fn, delay = 300) { let timer; return function (...args) { if (timer) clearTimeout(timer); // 清除之前的定时器 timer = setTimeout(() => fn.apply(this, args), delay); };}示例：输入框防抖
<input type=\"text\" id=\"search\" placeholder=\"请输入内容\"><script>const input = document.getElementById(\'search\');input.addEventListener(\'input\', debounce((e) => { console.log(\'搜索内容：\', e.target.value);}, 500));</script>效果：用户输入停止
500ms后，才触发console.log。
2. 什么是节流（Throttle）？
📝 概念
节流是一种限定函数执行频率的技术，即在一定时间间隔内，函数最多执行一次，即使事件被频繁触发。
核心思想：高频触发，固定间隔执行。
📌 适用场景
- 滚动事件（scroll）（如懒加载、页面滚动监听）
- 鼠标移动（mousemove）（防止触发过多计算）
- 按钮点击（click）（防止用户疯狂点击）
✅ 代码实现
function throttle(fn, interval = 300) { let lastTime = 0; return function (...args) { const now = Date.now(); if (now - lastTime >= interval) { fn.apply(this, args); lastTime = now; } };}示例：滚动监听
<div style=\"height: 2000px;\"></div><script>window.addEventListener(\'scroll\', throttle(() => { console.log(\'滚动中...\', new Date().toLocaleTimeString());}, 1000));</script>效果：无论滚动多快，
scroll事件每秒最多执行一次。
3. 防抖 vs. 节流：有什么区别？
setTimeout 延迟执行Date.now() 控制执行间隔📌 总结
- 如果你想等用户停止操作后再执行任务，使用防抖（Debounce）。
- 如果你希望控制函数执行的频率，使用节流（Throttle）。
4. 进阶优化：使用 Lodash
我们可以直接使用 Lodash 提供的 debounce 和 throttle 方法，避免自己实现。
✅ Lodash 防抖
npm install lodashimport _ from \'lodash\';const handleInput = _.debounce((e) => { console.log(\'防抖触发：\', e.target.value);}, 500);document.getElementById(\'search\').addEventListener(\'input\', handleInput);✅ Lodash 节流
const handleScroll = _.throttle(() => { console.log(\'节流触发\', new Date().toLocaleTimeString());}, 1000);window.addEventListener(\'scroll\', handleScroll);Lodash 优势：内部优化更好，支持立即执行（
leading）和延迟执行（trailing）。
5. 结合 Vue 实战应用
📌 Vue 中使用防抖
<template> <input v-model=\"searchText\" @input=\"handleInput\" placeholder=\"搜索\"></template><script>import { ref } from \'vue\';import _ from \'lodash\';export default { setup() { const searchText = ref(\'\'); const handleInput = _.debounce((e) => { console.log(\'搜索关键词:\', e.target.value); }, 500); return { searchText, handleInput }; },};</script>效果：用户停止输入
500ms后才会触发搜索请求。
📌 Vue 中使用节流
<template> <button @click=\"handleClick\">点击节流</button></template><script>import _ from \'lodash\';export default { setup() { const handleClick = _.throttle(() => { console.log(\'按钮点击\', new Date().toLocaleTimeString()); }, 2000); return { handleClick }; },};</script>效果：按钮每
2s只能点击一次。
6. 结论
防抖（Debounce）和节流（Throttle） 是前端性能优化的重要技术，合理使用可以显著减少不必要的计算，提高页面流畅度。
