节流

Throttle

交互模式也叫：throttle、限频

一句话：事件连续触发时按固定时间间隔执行，比如每 200ms 最多执行一次，用于滚动、拖动等高频事件。

详细解释

滚动、鼠标移动、拖动这类事件一秒能触发几十上百次，每次都执行复杂计算会让页面卡顿。节流的做法是给执行加一个最小间隔：不管触发多少次，每 200ms 最多执行一次，既有持续反馈，又不会太频繁。

适用场景：滚动时更新阅读进度条、判断是否显示「回到顶部」按钮、拖动时实时计算位置、防止用户连续狂点按钮。

和防抖的区别：节流在连续操作期间会按节奏多次执行，防抖要等操作停下才执行一次。滚动过程中需要实时变化的用节流，输入结束后才需要结果的用防抖。另外，节流和 AI 接口的「限流」不是一回事，限流是服务端限制调用次数。

可以直接贴给 Cursor、Claude Code 等工具，把里面的业务内容换成你自己的。

文章页顶部加一条阅读进度条，随页面滚动实时更新宽度；滚动事件请用节流，每 100ms 最多计算一次，避免滚动卡顿；滚动超过一屏时右下角显示「回到顶部」按钮，这个判断也放在同一个节流函数里。