节流函数通过定时器实现“尾部执行”，即在指定时间间隔内仅执行最后一次触发的操作。其核心是每次触发时清除旧定时器并设置新定时器，确保只有最后一次延迟执行。
节流函数（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 后，才更新布局：
立即学习“Java免费学习笔记（深入）”；
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）。
