防抖和节流

防抖：n秒内执行最后一次。

节流：n秒内只执行一次。

防抖

function debounce(func,delay,immediate = false){
//immediate表示第一次是否立即执行func函数
    let timer = null;
    return function (){
        const context = this;
        if(immediate){
            func(arguments);
            immediate = false;
            return;
        }

        if(timer){
            clearTimeout(timer);
        }
        timer = setTimeout(()=>{
            func.apply(context,arguments);
            //在setTimeout默认的this是指向window，所以需要重新指向到调用的函数
        },delay);

    }
}

function test(){
    console.log(123);
}

const doDebounce = debounce(test,1000);
doDebounce();

节流

function throttle(func,delay,immediate = false){
//immediate表示第一次是否立即执行func函数
    let timer = null
    
    return function(){
        const context = this;
        if(immediate){
            func(arguments);
            immediate = false;
            return;
        }
        if(timer) return;
        timer = setTimeout(()=>{
            func.apply(context,arguments);
            timer = null;
        });
    }
}

这两段代码的差别在于：

防抖，清除定时器是在setTimeout外面。

在触发时timer有值的时候，清除定时器，这时不论怎样的情况timer都没有了，所以timer重新设置一个定时器，计时重新开始，直到到了n秒，然后执行func。

节流，清除定时器的动作在setTimeout里面。

在timer定时器有值时，那我就不执行了，意思是他还是会执行之前定时器的代码func，等时间一到就执行。再次触发这个函数时，如果定时器的内容已执行完毕了，timer重新变空了，那再重新设一个定时器。

原理：在外层函数中定义一个timer，内部函数可以访问外部函数的timer，timer就是一个定时器，用到了闭包的原理。