节流函数确保固定时间间隔内最多执行一次，核心是记录并比较时间戳；防抖函数则在最后一次触发后延迟执行，适用于操作结束后的响应。
节流函数（Throttle）和防抖函数（Debounce）都是用来控制高频事件（比如 scroll、resize、input）触发频率的工具，但它们的触发逻辑完全不同：节流是“固定时间间隔内最多执行一次”，防抖是“最后一次触发后等待一段时间再执行”。
节流函数怎么实现
核心思路是：记录上一次执行的时间戳，每次触发时判断距离上次执行是否已超过设定的延迟；如果超过，就执行函数并更新时间戳；否则不执行。
一个简单可靠的实现如下：
<!-- 基于时间戳的节流 -->
function throttle(func, delay) {
let lastTime = 0;
return function(...args) {
const now = Date.now();
if (now - lastTime >= delay) {
func.apply(this, args);
lastTime = now;
}
};
}使用示例：
window.addEventListener('scroll', throttle(() => {
console.log('滚动被节流了');
}, 100)); // 每100ms最多执行一次注意：这种写法在首次触发时会立即执行（因为 lastTime 初始为 0），适合大多数场景。若需首次也延迟，可改用定时器方式（见下文进阶说明）。
节流的定时器版本（可选进阶）
有些场景需要严格按固定间隔执行（比如动画帧同步），可以用定时器控制，确保“至少 delay 时间后才允许下一次执行”：
<!-- 基于定时器的节流 -->
function throttle(func, delay) {
let timer = null;
return function(...args) {
if (!timer) {
timer = setTimeout(() => {
func.apply(this, args);
timer = null;
}, delay);
}
};
}这个版本首次触发不会立刻执行，而是等 delay 后再执行第一次，之后每 delay 时间执行一次。适合对执行时机要求更严格的场景。
节流和防抖的本质区别
关键不在“怎么写”，而在“什么时候执行”：
- 节流：像公交车——每 N 秒发一班车，不管中途有没有人上车，到点就走。适合需要持续反馈但不能太密的场景，比如滚动时实时计算可视区域。
- 防抖：像电梯关门——每次有人进来就重置倒计时，直到没人按按钮且过了 N 秒才关门。适合“等用户操作完全结束再响应”的场景，比如搜索框输入后发请求、窗口大小调整完再重排版。
举个对比例子：用户快速拖拽滚动条 2 秒，触发 100 次 scroll：
- 用节流（100ms）→ 大约执行 20 次（2000 ÷ 100）；
- 用防抖（100ms）→ 只执行 1 次（最后一次触发后 100ms 执行）。
怎么选：节流还是防抖
看你的业务需求是否需要“过程反馈”：
- 要监听过程（如滚动位置、鼠标移动轨迹、实时校验）→ 选节流；
- 只关心最终结果（如搜索、提交表单、窗口 resize 完布局）→ 选防抖；
- 不确定？先用防抖，它更保守、不易出错；有卡顿或反馈缺失再换成节流。
不复杂但容易忽略：两者都需注意 this 和参数传递，推荐用 func.apply(this, args) 或箭头函数 + 展开运算符确保上下文正确。
