函数节流原理

函数节流

定义: 函数节流就是每间隔一定时间触发/调用函数一次

优点: 优化系统性能

思路: 我们在初始的时候定义一个begin开始时间，当时间间隔超过duration时，则执行一次函数，这样我们做到了不重复调用，又能保证固定时间间隔执行一次。

函数节流原理:

function scrollFn(){
    console.log(1)
}
function throttle(method,delay,duration){
    var timer=null;
    // 定义开始时间
    var begin=new Date();    
    return function(){                
        var context=this, args=arguments;
        // 定义当时时间
        var current=new Date();        
        clearTimeout(timer);
        // 当时间间隔超过duration,则执行函数
        if(current-begin>=duration){
            method.apply(context,args);
            begin=current;
        }else{
            timer=setTimeout(function(){
                method.apply(context,args);
            },delay);
        }
    }
}
window.onscroll=throttle(scrollFn,100,500)

我们在初始的时候定义一个begin开始时间，当时间间隔超过duration时，则执行一次函数，这样我们做到了不重复调用，又能保证500毫秒执行一次。