在 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 或者搜索框输入联想等场景中。