在 JavaScript 中实现函数 throttle(节流)和 debounce(防抖)的组合可以通过以下代码实现:
function throttleAndDebounce(fn, delay) {
let timer = null;
let lastCallTime = 0;
return function(...args) {
const now = Date.now();
if (now - lastCallTime < delay) {
clearTimeout(timer);
timer = setTimeout(() => {
fn.apply(this, args);
}, delay);
} else {
lastCallTime = now;
fn.apply(this, args);
}
};
}
这个函数接受两个参数:一个是要执行的函数 fn
,另一个是延迟时间 delay
。其中,timer
和 lastCallTime
变量用于记录当前计时器和最后一次调用的时间。
当我们调用这个函数时,如果现在距离上一次调用不足 delay
毫秒,则清除上一次的计时器并设置一个新的计时器,在 delay
毫秒后触发函数执行。如果距离上一次调用已经超过 delay
毫秒了,则立即执行函数。
这个函数的作用是同时实现函数防抖和函数节流的效果。这对于需要控制函数执行频率的场景非常有用,例如在滚动事件中更新 UI 或者搜索框输入联想等场景中。