1.通用防抖函数方式的实现
function debounce(func, delay) {
let timer = null;
return function(...args) {
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(() => {
func.apply(this, args);
}, delay);
};
}
这个函数接受两个参数:要执行的函数 func 和延迟时间 delay。它返回一个新函数,当这个新函数被调用时,它会先清除之前设置的定时器(如果有的话),然后设置一个新的定时器,在延迟时间 delay 后执行 func 函数。
2.通用的前端节流函数
function throttle(func, delay) {
let last = 0;
return function(...args) {
const now = new Date().getTime();
if (now - last < delay) {
return;
}
last = now;
func.apply(this, args);
};
}
这个函数接受两个参数:要执行的函数 func 和延迟时间 delay。它返回一个新函数,当这个新函数被调用时,它会检查上一次调用的时间是否距离现在的时间超过了延迟时间 delay,如果超过了就执行 func 函数并更新上一次调用的时间,否则什么都不做。
可以将这个节流函数用于一些事件处理函数中,以确保这些函数不会被频繁调用。比如,当用户滚动页面时,需要处理滚动事件,但是由于滚动事件非常频繁,可能会导致处理函数被频繁调用,从而影响页面性能。使用节流函数可以将滚动事件的处理频率限制在一定的范围内,以避免影响页面性能。