节流与防抖
约 775 字大约 3 分钟
2026-03-31
问题
什么是节流与防抖？
节流（Throttle）和防抖（Debounce）是前端开发中用于优化高频率触发事件处理的两种技术，常用于处理如窗口缩放、滚动、输入框输入等高频事件。
节流（Throttle）
节流是指在一定时间内，只执行一次函数。也就是说，在规定的时间间隔内，无论触发多少次事件，函数只会执行一次。就像水龙头的节流阀，控制水的流速，在一定时间内只放出一定量的水。
应用场景
- 窗口缩放（
resize事件）：当用户调整浏览器窗口大小时，resize事件会频繁触发。如果在这个事件处理函数中进行一些复杂的布局计算或重新渲染操作，会导致性能问题。使用节流可以限制在一定时间内只执行一次布局计算，减轻浏览器负担。 - 滚动加载（
scroll事件）：在网页滚动加载更多内容的场景中，scroll事件会随着用户滚动页面不断触发。通过节流可以控制在一定时间内只进行一次数据加载请求，避免频繁请求导致服务器压力过大。
实现方式
function throttle(func, delay) {
let timer = null;
return function () {
if (!timer) {
func.apply(this, arguments);
timer = setTimeout(() => {
timer = null;
}, delay);
}
};
}
// 使用示例
function handleScroll() {
console.log("Scroll event triggered");
}
window.addEventListener("scroll", throttle(handleScroll, 500));防抖（Debounce）
概念
防抖是指在一定时间内，只有最后一次触发事件才会执行函数。如果在这个时间间隔内再次触发事件，则重新计时。就像电梯门，当有人不断进出时，电梯门不会关闭，直到一段时间内没有人再触发开门或关门操作，电梯门才会关闭。
应用场景
- 输入框搜索提示：在搜索框中输入关键词时，每次输入都会触发
input事件。如果实时根据输入内容进行搜索请求，会产生大量不必要的请求。使用防抖可以在用户停止输入一段时间后，才进行搜索请求，减少请求次数。 - 按钮点击防止重复提交：当用户快速多次点击提交按钮时，使用防抖可以确保只有最后一次点击才会触发提交操作，避免重复提交数据。
实现方式
function debounce(func, delay) {
let timer = null;
return function () {
clearTimeout(timer);
timer = setTimeout(() => {
func.apply(this, arguments);
}, delay);
};
}
// 使用示例
function handleInput() {
console.log("Input event triggered");
}
const input = document.querySelector("input");
input.addEventListener("input", debounce(handleInput, 300));总结
- 节流：适用于需要限制函数执行频率的场景，保证在一定时间内函数只执行一次，常用于处理高频触发的事件，如窗口缩放、滚动等。
- 防抖：适用于需要等待用户操作结束后再执行函数的场景，避免因用户频繁操作而导致函数多次执行，常用于输入框搜索提示、按钮点击等场景。