节流是在固定时间间隔内最多执行一次，适用于滚动监听等需匀速响应的场景；防抖是在最后一次触发后延迟执行，适用于搜索输入等需等待用户操作稳定的场景。
节流（Throttle）和防抖（Debounce）是前端处理高频事件（如 resize、scroll、input、click）的两种核心优化策略，目的都是减少函数执行频次，避免性能问题或重复请求。它们逻辑不同，适用场景也明显区分。
节流：固定时间间隔内最多执行一次
节流确保函数在指定时间窗口内，**至少执行一次，但不超过一次**。常用于需要“匀速响应”的场景，比如滚动监听、鼠标拖拽、Canvas 动画等——既要反馈及时，又不能太密集。
- 实现思路：用一个标志位或时间戳记录上一次执行时间；触发时判断距上次执行是否已超阈值，是则执行并更新时间，否则跳过
- 常见写法有定时器版（较易理解）和时间戳版（更精准）
- 示例：监听
window.onscroll做懒加载，每 100ms 最多检查一次可视区域，避免滚动过程中反复计算
防抖：最后一次触发后延迟执行，中间触发会重置计时
防抖把多次连续触发“压缩”成一次，在停止触发后的延迟时间后才真正执行。适合“等用户停下来再干活”的场景，比如搜索框输入联想、表单校验、窗口尺寸最终调整完成等。
- 实现关键：每次触发都清除前一个定时器，重新设置新定时器
- 注意区分“立即执行版”（首次触发立刻执行，后续连续触发不执行，停顿后再执行下一次）和“非立即执行版”（默认常用，只在最后停顿后执行）
- 示例：用户在搜索框输入 “hello”，每按一个键都触发请求，用防抖可等到他打完（停顿 300ms 后）再发请求，避免发 5 次无意义的 “h”、“he”、“hel”...
怎么选？看行为意图
判断依据很简单：
立即学习“Java免费学习笔记（深入）”；
- 要“控制频率、保持节奏” → 选节流（如实时位置上报、滚动锚点高亮）
- 要“等待稳定、响应终态” → 选防抖（如搜索建议、保存草稿、提交按钮防连点）
- 有些场景可组合使用：例如 resize 时先防抖确定尺寸稳定，再节流更新布局（较少见，需谨慎）
简单可复用的代码参考
以下为轻量、无依赖的实现（ES6）：
节流（时间戳版）：
function throttle(fn, delay) {
let last = 0;
return function(...args) {
const now = Date.now();
if (now - last >= delay) {
fn.apply(this, args);
last = now;
}
};
}防抖（非立即执行）：
function debounce(fn, delay) {
let timer = null;
return function(...args) {
clearTimeout(timer);
timer = setTimeout(() => fn.apply(this, args), delay);
};
}使用时直接包装事件回调即可，例如：window.addEventListener('scroll', throttle(handleScroll, 100))。
