JS 节流与防抖

一、区别
       节流强调的是n秒内函数最多触发一次，注意这里的用词最多，也就是可能不触发，一般第一次和最后一次可能不会触发；
防抖强调的是函数两次调用的间隔必须大于n秒，如果函数触发的频率一直小于n秒，那么只有最后一次才会触发函数执行

二、场景
节流：当给document加scroll事件时，假定处理函数为fn，那么当滑动鼠标时scroll事件会不断的被触发，影响滑动性能，这时可以用节流处理一下 throttle(fn，time)，可以保证fn在time时间内只触发一次
防抖：当做随着输入框输入不同内容展示不同的结果列表类似需求时，一般会绑定input的change事件，该事件在用户输入过程中会多次被触发，这时可以用防抖处理一下 debounce(fn,time)，可以保证在用户输入完time时间后才触发fn。这里不用 throttle，因为debounce更加符合

三、简易实现

throttle:节流

function throttle(fn,time,imediate) {
    let timer = null;
    return function() {
        const args = arguments;
        const _this = this;
        const callNow = imediate && !timer
        if (timer) {
            return;
        }
        timer = setTimeout(()=>{
            timer = null;
        },time);
         if(callNow){
             fn.apply(_this,args);
         }
    }
}

debounce:

function debounce(fn,time,imediate) {
    let timer = null;
    return function() {
        const args = arguments;
        const _this = this;
        const callNow = imediate && !timer
        if (timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(()=>{
            timer = null;
        },time)
        if(callNow){
            fn.apply(_this,args);
        }
    }
}

 

交流
可添加qq群共同进阶学习： 进军全栈工程师疑难解  群号:   856402057

对前端技术保持学习爱好者。我会经常分享自己所学所看的干货，在进阶的路上，共勉！欢迎关注公众号共同学习。