函数的防抖与节流（掌握下来！）

函数防抖与节流真是学了容易混乱和忘记，写到笔记里保存起来一起学习，还是要多敲一下码才能加深记忆，加油！一起来看看吧

防抖节流

防抖

通俗地说，防止手抖一下子操作了多次，就只触发一次

触发高频事件后n秒内函数只会执行一次，如果n秒内再触发，重新计算时间；简单来说，就是在一定时间内又调用了该函数，此时就会把之前的定时器清除，重新开始定时，这就导致了n秒内多次触发，结果真正只调用了一次

应用场景，当用户不小连续点击’加入购物车’时，在一定时间内设置防抖，就不会多次触发一个窗口

function debounce(fn,wait){
    var timeout=null;
    return function(){
        if(timeout!=null) //如果timeout不为空，说明又操作了，此时清除之前的定时器
            clearTimeout(timeout);
        timeout=setTimeout(fn,wait);//开始计时
    }
}
//处理函数
function handle(){
    console.log('处理了')
}
window.addEventListener('scroll',debounce(handle,1000))

上面的代码意思为：在一定时间内滚动鼠标，会触发debounce函数，如果在1s内再次触发就会清楚之前的定时器重新设置，即1s内多次滚动只实现滚动一次的效果

• 将几次操作合并为一次，原理是维护一个计时器，在delay时间内触发就会清除之前的计时器重新设置。最后的结果是，短时间内连续触发的事件，只执行了一次

• 拓展：可以将防抖设置在搜索框中，当用户输入完搜索关键词后，短时间内不再输入此时便可进行请求后台搜索，防止浪费请求

节流

按照上述的思路，我们防止了短时间大量触发统一操作，现在看下一个场景：

• 如果有用户在限定时间内，不断滚动鼠标，那么就一直不会触发handle事件，但是我们还是希望在一定时间后给用户做出反馈，此时节流便出场了

节流就像阀门，可以设置定期打开，这样在防止频繁操作的同时保证事件能定期正常触发

持续触发事件时保证一定时间内只调用一次事件处理函数，控制每次时间间隔达到定时器delay时才触发，判断是否达到一定时间触发函数

function throttle(func, wait) {
    //通过闭包保存一个标记
            let canRun = true;
            return function(){
//在函数开头判断标志是否为true，不为true则中断函数
           if(!canRun){
                    return;
                }
         //将canRun设置为false，防止执行之前再被执行
             canRun  = false;
                //定时器
            setTimeout(() => {
                fn.call(this,arguments);
        //执行完事件之后，重新将这个标志设置为true
                canRun  = true;
                },wait);
    };
}
//处理函数
function handle(){
    console.log('处理了')
}
window.addEventListener('scroll',throttle(handle,1000))

上述代码意思为：滚动鼠标后不会立即执行handle函数，而是过了1s后才执行，在函数执行时设置canRun标记，执行完后再释放canRun

区别

防抖只在最后一次触发；节流保证在规定时间内执行一次。 当页面无限加载时，每隔一段时间发一次ajax请求，而不是停下时触发，这时应该用节流。