节流函数通过定时器实现“尾部执行”,即在指定时间间隔内仅执行最后一次触发的操作。其核心是每次触发时清除旧定时器并设置新定时器,确保只有最后一次延迟执行。

节流函数(Throttle)通过定时器实现“尾部执行”,是指在指定时间间隔内,只保证最后一次触发的操作被执行,中间的调用被忽略。这种模式适合如窗口 resize、滚动监听等场景,确保操作不会过于频繁,又能在用户操作停止后执行最终状态。
核心思路:清除旧定时器,仅保留最后一次的延迟执行
每次触发时,先清除已存在的定时器(防止重复执行),再设置一个新的定时器,在 delay 时间后执行目标函数。这样只有最后一次触发会“存活”到延时结束,前面的都被清除了。
基础实现代码(尾部执行版)
以下是一个简洁、可复用的节流函数:
function throttle(func, delay) {
let timer = null;
return function (...args) {
if (timer) clearTimeout(timer);
timer = setTimeout(() => {
func.apply(this, args);
timer = null; // 执行完清空,便于下一次判断
}, delay);
};
}
使用示例:监听窗口大小变化
比如你想在用户停止调整窗口大小 300ms 后,才更新布局:
const handleResize = () => {
console.log('窗口尺寸:', window.innerWidth, 'x', window.innerHeight);
};
const throttledResize = throttle(handleResize, 300);
window.addEventListener('resize', throttledResize);
此时,无论用户拖拽窗口多快,只要在 300ms 内有新 resize 事件,前一次的定时器就会被清除,最终只执行最后一次调整后的尺寸读取。
注意事项与常见问题
- 不适用于需要“立即响应首次触发”的场景:尾部节流首次触发也不执行,要等 delay 后才执行;若需首屏立即响应 + 后续节流,需额外加标记逻辑(即“首尾都执行”模式,非纯尾部)。
-
this 和参数需正确绑定:上面实现中用了
func.apply(this, args),确保原调用上下文和参数透传;若用箭头函数或漏传,可能丢失 this 或参数。 - 记得清理定时器避免内存泄漏:尤其在组件卸载(如 React useEffect cleanup)时,应保存 throttle 返回的函数并手动清除 timer(或改用 useRef 存 timer ID)。
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











