节流是在指定时间间隔内最多执行一次函数，通过记录上次执行时间戳并比较当前时间差来实现；支持立即执行选项，常用于scroll、resize等高频事件。
节流（Throttle）是控制函数执行频率的常用手段，特别适合处理高频触发的事件（比如 scroll、resize）。它的核心思想是：**在指定时间间隔内，函数最多只执行一次**，即使事件被连续触发多次，也强制“匀速”执行。
节流的基本原理
节流的关键在于记录上一次执行的时间戳，每次触发时判断距离上次执行是否已超过设定的延迟（如 100ms）。只有满足条件才真正执行函数，并更新时间戳；否则跳过。
与防抖（Debounce）不同，节流保证函数会定期执行，不会因用户持续操作而完全不响应。
手写一个简单可靠的节流函数
下面是一个轻量、无依赖的节流实现，支持立即执行选项（可选）：
立即学习“Java免费学习笔记（深入）”；
function throttle(func, delay, options = {}) {
let lastTime = 0;
const { leading = true, trailing = false } = options;
<p>return function(...args) {
const now = Date.now();
// 判断是否满足执行条件
if (now - lastTime >= delay) {
func.apply(this, args);
lastTime = now;
} else if (trailing && !timeoutId) {
// 可选：在最后一次触发后补一次（需配合定时器）
let timeoutId = setTimeout(() => {
func.apply(this, args);
lastTime = Date.now();
timeoutId = null;
}, delay - (now - lastTime));
}
};
}更推荐使用精简版（只保留最常用逻辑，即「首次立即执行 + 定期间隔」）：
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
function throttle(func, delay) {
let lastRun = 0;
return function(...args) {
const now = Date.now();
if (now - lastRun >= delay) {
func.apply(this, args);
lastRun = now;
}
};
}在滚动事件中实际应用
将节流函数包裹你的滚动处理逻辑，再绑定到 scroll 事件：
const handleScroll = () => {
console.log('滚动位置：', window.pageYOffset);
// 比如懒加载、吸顶导航、视差效果等
};
<p>const throttledScroll = throttle(handleScroll, 100); // 100ms 内最多执行一次</p><p>window.addEventListener('scroll', throttledScroll);⚠️ 注意事项：
- 避免在回调中直接写匿名函数（如
scroll: throttle(() => {...}, 100)），会导致每次绑定都新建函数，无法正确节流 - 如果需要解绑事件，保存节流后的函数引用（如上面的
throttledScroll），而不是原始函数 - 移动端慎用
scroll，可考虑监听touchmove或使用IntersectionObserver替代部分场景
使用 Lodash 等工具库（快速上线）
如果你项目已引入 Lodash，可直接调用：
import { throttle } from 'lodash';
<p>window.addEventListener('scroll', throttle(() => {
console.log(window.pageYOffset);
}, 100));Lodash 的 throttle 更健壮，支持 leading、trailing、取消/刷新等能力，适合复杂交互场景。
