节流是控制函数在指定时间间隔内最多执行一次的技术，核心是按固定周期执行，适合滚动监听等需持续反馈的场景，与防抖的“延迟确认”逻辑有本质区别。
节流（Throttle）是 JavaScript 中一种控制函数执行频率的技术：它保证函数在指定时间间隔内最多只执行一次，无论事件被触发多少次。
节流的核心行为
节流就像“固定班次的公交”——不管路上有多少人想上车，每 500ms 发一班车，到点就走，不等人也不多发。
- 第一次触发立即执行（或延迟后首次执行，取决于实现方式）
- 随后进入“锁定期”，期间重复触发被忽略
- 锁定期结束后，下一次触发才会再次执行
节流与防抖的关键区别
两者都为应对高频事件而生，但响应逻辑完全不同：
- 节流重“节奏”：按固定周期执行，适合需要持续反馈的场景，比如滚动监听、鼠标移动追踪
- 防抖重“收尾”：只在事件停止后延时执行一次，适合“等用户做完再响应”的场景，比如搜索建议、窗口尺寸调整后的重排版
- 同一事件连续触发 10 次，节流可能执行 2～3 次（如每 500ms 一次），防抖通常只执行 1 次（最后一次触发后等待结束）
典型使用场景对比
节流常用在这些地方：
立即学习“Java免费学习笔记（深入）”；
- 监听页面滚动（
scroll），判断是否接近底部加载更多 - 拖拽元素时实时更新位置（
mousemove） - 游戏里限制射击频率（
mousedown或keydown） - Canvas 动画帧控制，避免过度绘制
防抖更常用于：
- 搜索框输入（
input或keyup），等用户停顿后再请求建议 - 窗口大小调整（
resize），避免频繁重计算布局 - 表单实时校验（如邮箱格式），减少无效验证次数
简单手写实现参考
节流（定时器版，首次触发延迟执行）：
function throttle(func, delay) {
let timer = null;
return function(...args) {
if (!timer) {
timer = setTimeout(() => {
func.apply(this, args);
timer = null;
}, delay);
}
};
}
防抖（经典版，每次触发重置计时）：
function debounce(func, delay) {
let timer = null;
return function(...args) {
clearTimeout(timer);
timer = setTimeout(() => func.apply(this, args), delay);
};
}
不复杂但容易忽略：节流关注“单位时间内的上限”，防抖关注“静默期后的唯一响应”。选哪个，关键看你要的是“持续节制”还是“延迟确认”。
