函数节流是一种控制高频事件执行频率的技术，通过设定时间间隔确保回调函数最多执行一次。与防抖不同，节流在指定周期内至少执行一次，适用于滚动监听、鼠标移动等场景。基础实现通过记录上一次执行时间判断是否达到周期；高级实现可支持leading（首帧执行）和trailing（末尾补调）配置，灵活适配动画响应或数据上报需求。实际使用中需权衡性能与体验，避免过短延迟，注意this指向与参数传递，并在必要时提供取消功能以防止内存泄漏。
函数节流（Throttling）是一种控制函数执行频率的技术，常用于优化高频触发事件的处理，比如窗口滚动、鼠标移动或键盘输入。与防抖不同，节流保证函数在指定时间间隔内至少执行一次，而不是只在最后一次触发时执行。
什么是函数节流
节流的核心思想是：无论事件触发多频繁，回调函数在设定的时间周期内最多执行一次。例如设置 100ms 的节流时间，那么在这 100ms 内无论事件触发多少次，处理函数只会执行一次。
这在需要持续响应但又不想过度消耗性能的场景中非常有用。
常见应用场景：
立即学习“Java免费学习笔记（深入）”；
基础节流实现
通过记录上一次执行时间来判断是否达到执行周期：
function throttle(fn, delay) {
let lastTime = 0;
return function (...args) {
const now = Date.now();
if (now - lastTime >= delay) {
fn.apply(this, args);
lastTime = now;
}
};
}
这种方式简单有效，适用于大多数基本场景。
带 leading 和 trailing 配置的高级节流
更灵活的节流函数可以支持首尾控制：
- leading： 是否在周期开始时立即执行
- trailing： 是否在周期结束后补一次执行
function advancedThrottle(fn, delay, options = {}) {
const { leading = true, trailing = true } = options;
let timer = null;
let lastArgs = null;
return function throttled(...args) {
if (timer === null && leading) {
fn.apply(this, args);
} else {
lastArgs = args;
}
if (timer) return;
if (trailing) {
timer = setTimeout(() => {
if (lastArgs) {
fn.apply(this, lastArgs);
lastArgs = null;
}
timer = null;
}, delay);
}
};
}
这种实现允许开发者根据业务需求选择行为模式，比如某些动画场景希望立即响应，而数据上报可能只需要最后补一次。
实际使用建议
节流不是万能优化手段，需结合具体场景权衡：
- 对于需要持续反馈的操作（如拖拽），节流比防抖更合适
- 避免设置过短的延迟时间，否则失去节流意义
- 注意 this 指向和参数传递的正确性
- 考虑是否需要取消功能，在组件卸载时清除定时器
基本上就这些，掌握节流原理后可以根据项目需求灵活调整实现方式。关键是在性能和用户体验之间找到平衡点。
