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

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

📌 弁言

在前端开发中，我们经常须要处置处罚高频变乱（如输入框输入、滚动、窗口调解巨细等）。如果不加限定，欣赏器会频仍触发回调函数，导致性能问题，以致页面卡顿。
防抖（Debounce） 和 节流（Throttle） 是两种优化方案，可以有用控制变乱触发的频率，进步应用的性能和用户体验。
本篇文章将具体分析 防抖和节流的原理、实用场景及代码实现，资助你更好地优化前端应用。

---

1. 什么是防抖（Debounce）？

📝 概念

防抖是一种在变乱触发后延迟执行的技能，如果在延迟期间变乱被再次触发，计时器会重置，重新盘算延迟时间。
焦颔首脑：短时间内多次触发，只执行末了一次。
📌 实用场景

• 搜刮框输入（防止用户每次输入都发送请求）
  
• 窗口调解巨细（resize）（防止短时间内多次触发盘算）
  
• 表单输入验证（用户停止输入后再举行验证）
  

✅ 代码实现

1. function debounce(fn, delay = 300) {
2.     let timer;
3.     return function (...args) {
4.         if (timer) clearTimeout(timer); // 清除之前的定时器
5.         timer = setTimeout(() => fn.apply(this, args), delay);
6.     };
7. }

复制代码

示例：输入框防抖

1. <input type="text" id="search" placeholder="请输入内容">
2. <script>
3. const input = document.getElementById('search');
5. input.addEventListener('input', debounce((e) => {
6.     console.log('搜索内容：', e.target.value);
7. }, 500));
8. </script>

复制代码

结果：用户输入停止 500ms 后，才触发 console.log。

---

2. 什么是节流（Throttle）？

📝 概念

节流是一种限定函数执行频率的技能，即在一定时间隔断内，函数最多执行一次，纵然变乱被频仍触发。
焦颔首脑：高频触发，固定隔断执行。
📌 实用场景

• 滚动变乱（scroll）（如懒加载、页面滚动监听）
  
• 鼠标移动（mousemove）（防止触发过多盘算）
  
• 按钮点击（click）（防止用户疯狂点击）
  

✅ 代码实现

1. function throttle(fn, interval = 300) {
2.     let lastTime = 0;
3.     return function (...args) {
4.         const now = Date.now();
5.         if (now - lastTime >= interval) {
6.             fn.apply(this, args);
7.             lastTime = now;
8.         }
9.     };
10. }

复制代码

示例：滚动监听

1. <div style="height: 2000px;"></div>
2. <script>
3. window.addEventListener('scroll', throttle(() => {
4.     console.log('滚动中...', new Date().toLocaleTimeString());
5. }, 1000));
6. </script>

复制代码

结果：无论滚动多快，scroll 变乱每秒最多执行一次。

---

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

防抖（Debounce）节流（Throttle）触发方式变乱触发后延迟执行变乱触发后隔断执行特性短时间一连触发，只执行末了一次固定时间隔断内最多执行一次实用场景输入框输入、搜刮框、表单验证滚动、鼠标移动、按钮点击上风克制无效调用，镌汰资源斲丧包管高频变乱可执行，进步流畅度实现方式setTimeout 延迟执行Date.now() 控制执行隔断📌 总结

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

---

4. 进阶优化：使用 Lodash

我们可以直接使用 Lodash 提供的 debounce 和 throttle 方法，克制自己实现。
✅ Lodash 防抖

1. npm install lodash

复制代码

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

复制代码

✅ Lodash 节流

1. const handleScroll = _.throttle(() => {
2.     console.log('节流触发', new Date().toLocaleTimeString());
3. }, 1000);
5. window.addEventListener('scroll', handleScroll);

复制代码

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

---

5. 联合 Vue 实战应用

📌 Vue 中使用防抖

1. <template>
2.   <input v-model="searchText" @input="handleInput" placeholder="搜索">
3. </template>
5. <script>
6. import { ref } from 'vue';
7. import _ from 'lodash';
9. export default {
10.   setup() {
11.     const searchText = ref('');
13.     const handleInput = _.debounce((e) => {
14.       console.log('搜索关键词:', e.target.value);
15.     }, 500);
17.     return { searchText, handleInput };
18.   },
19. };
20. </script>

复制代码

结果：用户停止输入 500ms 后才会触发搜刮请求。

---

📌 Vue 中使用节流

1. <template>
2.   <button @click="handleClick">点击节流</button>
3. </template>
5. <script>
6. import _ from 'lodash';
8. export default {
9.   setup() {
10.     const handleClick = _.throttle(() => {
11.       console.log('按钮点击', new Date().toLocaleTimeString());
12.     }, 2000);
14.     return { handleClick };
15.   },
16. };
17. </script>

复制代码

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

---

6. 结论

防抖（Debounce）和节流（Throttle） 是前端性能优化的紧张技能，公道使用可以明显镌汰不须要的盘算，进步页面流畅度。
实用场景保举方法输入框防止频仍请求✅ 防抖（Debounce）窗口调解巨细（resize）✅ 防抖（Debounce）滚动变乱（scroll）✅ 节流（Throttle）鼠标移动（mousemove）✅ 节流（Throttle）按钮点击（click）✅ 节流（Throttle）