深入理解前端防抖（Debounce）与节流（Throttle）：原理、区别与实战示例

深入理解前端防抖（Debounce）与节流（Throttle）：原理、区别与实战示例

📌 引言

在前端开发中，我们经常需要处理高频事件（如输入框输入、滚动、窗口调整大小等）。如果不加限制，浏览器会频繁触发回调函数，导致性能问题，甚至页面卡顿。

防抖（Debounce） 和 节流（Throttle） 是两种优化方案，可以有效控制事件触发的频率，提高应用的性能和用户体验。

本篇文章将详细解析 防抖和节流的原理、适用场景及代码实现，帮助你更好地优化前端应用。

1. 什么是防抖（Debounce）？

📝 概念

防抖是一种在事件触发后延迟执行的技术，如果在延迟期间事件被再次触发，计时器会重置，重新计算延迟时间。

核心思想：短时间内多次触发，只执行最后一次。

📌 适用场景

• 搜索框输入（防止用户每次输入都发送请求）
• 窗口调整大小（resize）（防止短时间内多次触发计算）
• 表单输入验证（用户停止输入后再进行验证）

✅ 代码实现

functiondebounce(fn, delay =300){let timer;returnfunction(...args){if(timer)clearTimeout(timer);// 清除之前的定时器 timer =setTimeout(()=>fn.apply(this, args), delay);};}

示例：输入框防抖

<inputtype="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）（防止用户疯狂点击）

✅ 代码实现

functionthrottle(fn, interval =300){let lastTime =0;returnfunction(...args){const now = Date.now();if(now - lastTime >= interval){fn.apply(this, args); lastTime = now;}};}

示例：滚动监听

<divstyle="height: 2000px;"></div><script> window.addEventListener('scroll',throttle(()=>{ console.log('滚动中...',newDate().toLocaleTimeString());},1000));</script>

效果：无论滚动多快，scroll 事件每秒最多执行一次。

3. 防抖 vs. 节流：有什么区别？

📌 总结

• 如果你想等用户停止操作后再执行任务，使用防抖（Debounce）。
• 如果你希望控制函数执行的频率，使用节流（Throttle）。

4. 进阶优化：使用 Lodash

我们可以直接使用 Lodash 提供的 debounce 和 throttle 方法，避免自己实现。

✅ Lodash 防抖

npm install lodash 

import _ from'lodash';const handleInput = _.debounce((e)=>{ console.log('防抖触发：', e.target.value);},500); document.getElementById('search').addEventListener('input', handleInput);

✅ Lodash 节流

const handleScroll = _.throttle(()=>{ console.log('节流触发',newDate().toLocaleTimeString());},1000); window.addEventListener('scroll', handleScroll);

Lodash 优势：内部优化更好，支持立即执行（leading）和延迟执行（trailing）。

5. 结合 Vue 实战应用

📌 Vue 中使用防抖

<template><inputv-model="searchText"@input="handleInput"placeholder="搜索"></template><script>import{ ref }from'vue';import _ from'lodash';exportdefault{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';exportdefault{setup(){const handleClick = _.throttle(()=>{ console.log('按钮点击',newDate().toLocaleTimeString());},2000);return{ handleClick };},};</script>

效果：按钮每 2s 只能点击一次。

6. 结论

防抖（Debounce）和节流（Throttle） 是前端性能优化的重要技术，合理使用可以显著减少不必要的计算，提高页面流畅度。