JavaScript 防抖与节流怎么支持防抖节流速率控制
通过为防抖和节流函数添加自定义的速率限制参数来实现。具体做法是在封装函数时增加一个 ratelimit 选项，用于指定允许执行的最小时间间隔（毫秒）。在触发回调前，先检查当前时间与上次执行时间的差值是否小于该限制，若小于则直接忽略本次调用，从而在原有的防抖或节流逻辑之上叠加一层严格的速率控制。
如何实现带速率控制的防抖函数
实现带速率控制的防抖函数需要在定时器逻辑中增加对执行频率的判断。核心思路是维护一个 lastExecTime 变量，每次触发时计算当前时间与 lastExecTime 的差值。如果设置了 rateLimit 且差值小于该值，则不重置定时器也不执行回调；只有当差值大于等于 rateLimit 时，才进行正常的防抖处理。这样可以防止在短时间内高频触发导致的有效执行过于密集。
function debounceWithRate(fn, wait, options = {}) {
let timer = null;
let lastExecTime = 0;
const rateLimit = options.rateLimit || 0;
return function (...args) {
const now = Date.now();
const timeSinceLastExec = now - lastExecTime;
// 如果设置了速率限制且未达到最小间隔，直接返回
if (rateLimit > 0 && timeSinceLastExec < rateLimit) {
return;
}
// 清除之前的定时器
if (timer) {
clearTimeout(timer);
timer = null;
}
// 如果是立即执行模式，且距离上次执行已超过速率限制
if (options.leading && timeSinceLastExec >= rateLimit) {
fn.apply(this, args);
lastExecTime = now;
return;
}
// 设置新的定时器
timer = setTimeout(() => {
fn.apply(this, args);
lastExecTime = Date.now();
timer = null;
}, wait);
};
}如何实现带速率控制的节流函数
实现带速率控制的节流函数需要结合时间戳和定时器两种策略，并在其中嵌入速率检查。在基于时间戳的节流中，除了判断是否超过 wait 时间外，还需确保两次执行的实际间隔不小于 rateLimit。在基于定时器的节流中，同样需要在进入定时器前检查速率。这种双重检查机制确保了即使在高并发场景下，函数的执行频率也不会超过设定的上限。
立即学习“Java免费学习笔记（深入）”；
function throttleWithRate(fn, wait, options = {}) {
let timeout = null;
let lastExecTime = 0;
const rateLimit = options.rateLimit || 0;
return function (...args) {
const now = Date.now();
const timeSinceLastExec = now - lastExecTime;
// 清除之前的定时器
if (timeout) {
clearTimeout(timeout);
timeout = null;
}
// 如果设置了速率限制且未达到最小间隔，直接返回
if (rateLimit > 0 && timeSinceLastExec < rateLimit) {
return;
}
// 如果是立即执行模式，且距离上次执行已超过速率限制
if (options.leading && timeSinceLastExec >= rateLimit) {
fn.apply(this, args);
lastExecTime = now;
return;
}
// 如果未到等待时间，设置定时器
if (timeSinceLastExec < wait) {
timeout = setTimeout(() => {
fn.apply(this, args);
lastExecTime = Date.now();
timeout = null;
}, wait - timeSinceLastExec);
} else {
// 否则立即执行并更新时间
fn.apply(this, args);
lastExecTime = now;
}
};
}速率控制在实际输入中的表现
在实际使用中，当用户快速连续触发事件时，速率控制会显著减少有效回调的执行次数。例如，设置 rateLimit 为 500ms，即使用户在 100ms 内触发了 10 次事件，函数也只会按照每 500ms 执行一次的频率运行。这种机制特别适用于对性能敏感的场景，如窗口调整、滚动监听等，能够有效降低 CPU 负载，避免页面卡顿。
