防抖和节流

防抖和节流

定时器基础知识

防抖和节流

监听浏览器滚动条滚动

以window.onscroll为例：scroll的触发非常敏感，比如10ms就触发一次

Underscore.js

闭包串起来的知识点：

不销毁的私有作用->柯理化，bind源码；自己也实现过项目中的防抖和节流

防抖

高频触发的问题，使得函数在某个时间间隔内只执行一次

最后调用(执行)的是返回的方法，其实还是柯理化；

有个timer变量：放在debounce大函数中，然后setTimeout中将timer清空；

防抖的关键：

设置一个定时器，间隔时间内只执行一次；

设置新的定时器前一定要把之前的清空掉；

function simpleDebounce(func,wait){
    let result=null;
    let timer=null;
    return function(){
        let context=this;
        clearTimeout(timer);
        timer=setTimeout(() => {
            timer=null;
            result=func.call(context,...arguments)
        }, wait);
        return result;
    }
}
function myDebounce(func,wait,immediate){
    let result=null;
    let timer=null;
    return function(){
        let context=this;
        let now = immediate && !timer;
        clearTimeout(timer);
        timer=setTimeout(() => {
            // 结束边界触发
            if(!immediate) result=func.call(context,...arguments);
            timer=null;
            clearTimeout(timer);
        }, wait);
        // 设置为开始边界执行
        if(now) result=func.call(context,...arguments);
        return result;
    }
}


function fn(){
    console.time('scroll');
    console.log('scroll');
    console.timeEnd('scroll')
}
// window.onscroll = fn;
// window.onscroll = _.debounce(fn,100,true);
// window.onscroll = simpleDebounce(fn,100,true);
window.onscroll = myDebounce(fn,100,true);

节流

设置定时器之前并没有清除之前的，它只是为了缩减频率而不是只执行一次；

几个变量：

now一定是当前时间；

now-previous，这次触发和上次触发间隔的时间；然后和wait做比较

1. remaining<=0，过了等待时间，立即执行，并更新previous；

2. 没到等待时间，就设置一个定时器，就让它延时remaining执行；意思是，这个func依旧会执行，但是让它过remaining再执行；

所以节流，每过wait必然会执行一次，频率就是你设置的wait

整个过程只执行一次，就用防抖；只是减少频率就用节流

具体场景：

下拉图片延迟加载用节流；滚动到底部加载数据，用防抖；

防抖和节流的区别：

防抖在一直操作的过程中只执行一次；把执行的频率减少；

防抖的关键点在于设置新的定时器之前把之前的都清掉；节流是，到达等待时间的立即执行，没到等待时间的设置定时器到时执行；

function throttle1(func,wait){
    let timeout=null;
    let previous=0;
    return function(){
        let context=this;
        let now=new Date;
        let remaining=wait - (now-previous);
        if(remaining<=0){
            clearTimeout(timeout);
            timeout=null;
            previous=now;
            func.call(context,...arguments);
        }else if(!timeout){
            timeout=setTimeout(() => {
                timeout=null;
                func.call(context,...arguments);
                previous=new Date;
            }, remaining);
        }
    }


}
function fn(){
    console.time('scroll');
    console.log('scroll');
    console.timeEnd('scroll')
}
// window.onscroll = fn;
// window.onscroll = _.debounce(fn,100,true);
// window.onscroll = simpleDebounce(fn,100,true);
// window.onscroll = myDebounce(fn,1000,true);
window.onscroll = throttle1(fn,1000,true);
// window.onscroll = _.throttle(fn,1000,{leading:true,trailing:true});