javascript节流是什么_如何实现一个节流函数？

节流函数典型场景包括scroll、resize、mousemove事件及canvas动画同步；手写需支持leading立即执行和trailing结尾补发，核心是时间戳判断与定时器精准清理。

节流（throttle）是控制函数执行频率的常用手段，核心作用是「保证函数至少间隔一定时间才执行一次」。它和防抖（debounce）不同：节流不等待用户停止操作，而是固定节奏放行，适合处理 scroll、resize、mousemove 等高频事件。

节流的典型使用场景有哪些？

常见于需要响应但不能太频繁的操作：

• 滚动时计算可视区域元素（scroll 事件）
• 窗口缩放时重排布局（resize 事件）
• 鼠标移动轨迹采样（mousemove 事件）
• canvas 动画帧同步（避免超频绘制）

注意：如果目标是「等用户停下来再执行」，比如搜索框输入联想，该用防抖；节流更适合「匀速响应」类需求。

如何手写一个带 leading 和 trailing 控制的节流函数？

标准节流需支持三种行为：立即执行（leading）、结尾补发（trailing）、或两者都不启用。关键在于用时间戳判断是否过了冷却期，并缓存最后一次调用的参数。

立即学习“Java免费学习笔记（深入）”；

以下是带完整控制逻辑的实现：

function throttle(func, delay, options = {}) {   let lastTime = 0;   let timerId = null;   const { leading = true, trailing = false } = options; 
return function throttled(...args) { const now = Date.now();
if (!leading && !lastTime) {   lastTime = now; }  if (now - lastTime >= delay) {   func.apply(this, args);   lastTime = now;   if (timerId) {     clearTimeout(timerId);     timerId = null;   } } else if (trailing && !timerId) {   timerId = setTimeout(() => {     func.apply(this, args);     lastTime = Date.now();     timerId = null;   }, delay - (now - lastTime)); }
}; }
说明：

 leading: true → 第一次调用立刻执行（默认）
 trailing: true → 最后一次调用会在 delay 后补发（需配合 clearTimeout 防重复）
不传 options 时等价于 { leading: true, trailing: false } 
避免用 setTimeout 单纯计时替代时间戳判断，否则在快速连续触发下会失准

 为什么不能直接用 setInterval 模拟节流？
看似简单，但有严重缺陷：

 setInterval 是固定节奏轮询，无法感知真实调用时机，可能漏掉中间参数或上下文
无法区分「用户刚触发」和「还在冷却中」，容易丢失关键调用（如 resize 的最终尺寸）
手动清理 clearInterval 易出错，且无法与调用方生命周期对齐
在页面非激活状态（tab 切走）时，setInterval 可能被节流甚至暂停，导致行为不一致

所以节流函数必须基于每次调用的时间戳做决策，而不是依赖定时器驱动。
真正难的是 trailing 补发逻辑的时机计算和 timer 清理边界——很多人漏掉 clearTimeout 或算错剩余延迟，导致重复执行或漏执行。动手前先想清楚：你要的是「稳态节奏」还是「首尾兼顾」。