前端防抖与节流详解：原理、区别与实战示例

效果：用户输入停止 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）。

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） 是前端性能优化的重要技术，合理使用可以显著减少不必要的计算，提高页面流畅度。