定义
- 防抖:多次触发事件,事件处理函数只执行一次。例如点击事件,我们在延迟时间内连续点击,只会执行一次,停止点击超出延迟时间,然后继续点击才会再次执行。
- 节流:事件触发后,延迟时间内,事件处理函数不能再次被调用。例如点击事件,我们不停的点击,事件会执行多次,但是有时间间隔,间隔时间接近于延迟时间。
实现
1.防抖
function debounce(fn, delay, immediate, ...outerArgs) {
let timer = null;
return function (...innerArgs) {
if (timer) clearTimeout(timer);
if (immediate) {
let callNow = !timer;
timer = setTimeout(() => {
timer = null;
}, delay);
if (callNow) fn.call(this, ...outerArgs, ...innerArgs);
} else {
timer = setTimeout(() => {
fn.call(this, ...outerArgs, ...innerArgs);
}, delay)
}
};
}
2.节流
function throttle(fn, delay, immediate, ...outerArgs) {
let lastTime = 0;
let timer = null;
return function (...innerArgs) {
if (immediate) {
let nowTime = Date.now();
if (nowTime - lastTime > delay) {
lastTime = nowTime;
fn.call(this, ...outerArgs, ...innerArgs);
}
} else {
if (!timer) {
timer = setTimeout(() => {
timer = null;
fn.call(this, ...outerArgs, ...innerArgs);
}, delay)
}
}
};
}
immediate:是否立即执行。
outerArgs和innerArgs都写,是为了更好的接受参数,可以在创建回调函数时传入参数,也可以在执行回调函数传入参数。
使用
html部分
<button onclick="handleClick('张三')">点击</button>
javascript部分
const clickDebounce = debounce(print, 2000, false);
const clickThrottle = throttle(print, 2000, false);
function handleClick(params) {
clickDebounce(params);
clickThrottle(params);
}