防抖和节流是为了防止监听时间或其他频繁触发的时间大量重复调用方法导致的性能浪费;
简单的防抖:持续触发的事件过程中,当过了一段时间没有调用然后执行最后一次事件
function debounce (fn, delay) {
var timer;
return function () {
clearTimeout(timer);
timer = setTimeout(() => {
fn.call(this);
}, delay)
}
}
简单的节流:每隔多少时间调用一次事件
function throttle (fn, delay) {
var last = 0;
return function () {
let now = new Date().getTime();
if (now - last > delay) {
fn.call(this);
last = now;
}
}
}
进阶版本防抖和节流
https://blog.csdn.net/qin904495445/article/details/105786993
function debounce (fn, delay, immediate) {
let timer, res;
let debounceFn = () => {
if (timer) {
clearTimer(timer);
}
if (immediate) {
let now = !timer;
timer = setTimeout(() => {
timer = null;
}, delay);
if (now) {
res = fn.call(this);
}
} else {
timer = setTimeout(() => {
res = fn.call(this);
}, delay);
}
return res;
}
debounceFn.cancel = () => {
clearTimeout(timer);
timer = null;
};
return debounceFn;
}
https://blog.csdn.net/u012411231/article/details/106926053/
https://www.cnblogs.com/songyao666/p/11415787.html