防抖和节流是 JavaScript 中常用的函数优化技巧,它们可以限制特定的函数执行次数,提高页面性能并避免浏览器崩溃等问题。
下面是一个防抖的示例实现:
function debounce(func, delay) {
let timer;
return function() {
const context = this;
const args = arguments;
clearTimeout(timer);
timer = setTimeout(() => {
func.apply(context, args);
}, delay);
}
}
这里我们定义了一个 debounce
函数,它接受一个需要执行的函数 func
和延迟时间 delay
作为参数,并返回一个新函数。当新函数被调用时,它会使用 setTimeout
函数延迟 delay
毫秒执行 func
函数,如果在这段时间内新函数被再次调用,则清除上一个 setTimeout
定时器并重新设置一个新的定时器,以此类推。
节流(throttle)是指在一定时间间隔内,无论用户触发多少次某个函数,只执行一次该函数。节流可以用于如滚动监听等需要频繁触发函数的场景。
下面是一个节流的示例实现:
function throttle(func, wait) {
let previous = 0;
return function(...args) {
let now = new Date().getTime();
if (now - previous > wait) {
func.apply(this, args);
previous = now;
}
};
}