深入理解前端防抖（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）

触发方式：事件触发后延迟执行
特性：短时间连续触发，只执行最后一次
适用场景：输入框输入、搜索框、表单验证
优势：避免无效调用，减少资源消耗
实现方式：setTimeout 延迟执行

节流（Throttle）

触发方式：事件触发后间隔执行
特性：固定时间间隔内最多执行一次
适用场景：滚动、鼠标移动、按钮点击
优势：保证高频事件可执行，提高流畅度
实现方式：Date.now() 控制执行间隔

总结

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

4. 进阶优化：使用 Lodash

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

npm install lodash

 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）。

结合 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 只能点击一次。