JS函数节流和去抖

去抖代码如下(一般用于窗口尺寸变化)：

window.onresize=function() {
    console.log(1111);
    clearTimeout(this.myTimeout); //注意：如果这里不用this(因为此this指向window),如:直接用myTimeout则要在onresize方法外先定义myTimeout,不可定义在方法内，更不可在setTimeout之后清除myTimeout
    this.myTimeout=setTimeout(function(){
        console.log(2222);
    }, 100);                    
};

 

节流代码如下(一般用于页面滚动)：

function scrollFn(){
    console.log(33333)
}
function throttle(method,duration){
    var timer=null;
    var begin=new Date();   //记录当前时间 
    return function(){                
        var context=this, args=arguments;
        var current=new Date();        
        clearTimeout(timer);
        if(current-begin>=duration){ //当前时间与上一次函数被执行的时间作差，与duration比较，若大于，则必须执行一次函数
            method.apply(context,args);
            begin=current;
        }
    }
}
window.onscroll=throttle(scrollFn,1000);

 

函数节流和函数去抖的使用场景略有不同：

函数去抖：在事件触发结束后一定时间后去执行事件回调函数，如果在这一定时间内又触发了相关事件，则不去触发事件回调函数，下一次执行事件回调函数时间仍是确定的一定时间，上面例子是在onresize停止0.1秒后执行一次。

函数节流：在事件触发过程中，减小相关回调函数的执行频率, 转而以固定时间执行，上面例子是在onscroll持续时间内间隔1秒执行一次。