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

深入理解前端防抖（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. 节流：有什么区别？

	防抖（Debounce）	节流（Throttle）
触发方式	事件触发后延迟执行	事件触发后间隔执行
特性	短时间连续触发，只执行最后一次	固定时间间隔内最多执行一次
适用场景	输入框输入、搜索框、表单验证	滚动、鼠标移动、按钮点击
优势	避免无效调用，减少资源消耗	保证高频事件可执行，提高流畅度
实现方式	setTimeout 延迟执行	Date.now() 控制执行间隔

📌 总结

• 如果你想等用户停止操作后再执行任务，使用防抖（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('节流触发', 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） 是前端性能优化的重要技术，合理使用可以显著减少不必要的计算，提高页面流畅度。

适用场景	推荐方法
输入框防止频繁请求	✅ 防抖（Debounce）
窗口调整大小（resize）	✅ 防抖（Debounce）
滚动事件（scroll）	✅ 节流（Throttle）
鼠标移动（mousemove）	✅ 节流（Throttle）
按钮点击（click）	✅ 节流（Throttle）