防抖函数:
防抖函数会在函数触发后等待一段时间,如果在这段时间内再次触发,则重新计时。只有当不再触发时,函数才会执行。
function debounce(func, delay) {
let timeout;
//利用clearTimeout()清除倒计时
return function(...args) {
clearTimeout(timeout);
//利用setTimeout()定时器
timeout = setTimeout(() => {
func.apply(this, args);
}, delay);
};
}
// 设置时间300ms
const debouncedFunc = debounce(() => {
console.log('Debounced function executed');
}, 300);
debouncedFunc();
debouncedFunc();
debouncedFunc(); // 在300ms内只会执行一次哦
节流函数:
节流函数会在一段时间内只允许函数触发一次,无论触发频率如何。
function throttle(func, interval) {
let lastTime = 0;
return function(...args) {
const now = Date.now();
//Date.now() 现在的时间
if (now - lastTime >= interval) {
func.apply(this, args);
lastTime = now;
}
};
}
// 使用示例
const throttledFunc = throttle(() => {
console.log('Throttled function executed');
}, 300);
throttledFunc();
throttledFunc();
throttledFunc(); // 在300ms内只会执行一次
👏根据实际情况修改,欢迎点评补充