防抖与节流

防抖： 在触发条件的n秒后，执行函数，如果在这n秒内再次触发条件，则重新计时。主要强调函数执行的次数。

// 防抖函数
const debounce = function(fn, delay=500) {
    let timer;
    return function(...args) {
        clearTimeout(timer);
        timer = setTimeout(()=>{
            fn.apply(this,args)
        }, delay)
    }
}
let fn = function(Mouse){
    console.log(Mouse)
}
document.onmousemove = debounce(fn);

节流： 在一个周期内如果触发了条件，无论触发多少次，都只会执行一次函数，如果想要再次执行就要等到下一个周期。主要强调函数执行的频率。

// 节流函数，定时器版本，记录是否有准备执行的函数，如果没有再添加函数
const throttle1 = function (fn, delay = 500) {
    let timer;
    return function (...args) {
        if(!timer) {
            timer = setTimeout(() => {
                fn.apply(this, args)
                timer = undefined;
            }, delay)
        }
    }
}
let fn = function (Mouse) {
    console.log(this)
    console.log(Mouse)
}
document.onmousemove = throttle1(fn);

// 节流函数，时间戳版本
const throttle2 = function(fn, delay=500) {
    let oldTime = new Date();
    return function(...args) {
        let newTime = new Date();
        if(newTime - oldTime > delay) {
            fn.apply(this,args);
            oldTime = new Date();
        }
    }
}
let fn = function (Mouse) {
    console.log(Mouse)
}
document.onmousemove = throttle2(fn);