js实现节流、防抖函数

摘要：节流、防抖函数属于性能优化方案，解决高频率触发事件带来的资源浪费问题，比如resize、scroll、mousemove等事件；节流与防抖函数方案都是通过增设执行回调等待时间来降低被触发事件执行回调的频率，但是对于增设执行回调等待时间这里处理方案不同，这里以定时器实现方案作出区别说明：
防抖函数：事件被触发，每次执行事件处理回调时清除上一次设置的定时器，并重新设置一个定时器，从而实现在规定时间x内执行定时器里的回调函数，如果在规定时间x内该事件又被触发了，那定时器清零重新计算时间，显然防抖函数能保证定时器里的回调处理会在时间大于等于x的间隔时间内执行一次；
节流函数：事件被触发，事件处理回调里设置一个定时器，定时时间间隔x，保证每次间隔时间x都会执行一次定时器里的回调，显然节流函数的执行定时器回调等待时间就是定时器设置时间x，执行完当前次定时任务结束后才会进行下一次定时x的任务；

总结：
1、防抖函数执行回调等待时间大于等于x；节流函数执行回调等待时间始终为x；
2、防抖函数实现的关键技术是，如在x时间内再次被触发事件，需要在x时间内清除上一次定时器任务，从而保证等待时间大于等于x；节流函数实现的关键技术是设置一个标志量去判断当前次定时器任务是否完成，完成再进行下一次定时器任务，从而保证等待时间恒为x；
3、防抖函数适用场景：搜索框搜索输入并请求数据、resize；节流函数适用场景：scorll、mousedown

防抖函数实现

function debounce(callback,delay){
    let timer=null;
    var that=this;

    return function(){
        var args=Array.prototype.slice.call(arguments);

        if(timer !== null){
            clearTimeout(timer)
        }

        timer=setTimeout(()=>{
            callback.apply(that,args)
        },delay)
    }
}

节流函数实现

function throttle(fn,delay){
    var timer=null;
    var that=this;

    return function(){
        var args=Array.prototype.slice.call(arguments);

        if(!timer){
            timer = setTimeout(()=>{
                fn.apply(that,args);
                timer=null;
            },delay)
        }
    }
}