函数节流器

1：函数节流器

函数节流的基本思想是设置一个定时器，在指定时间间隔内运行代码时清楚上一次的定时器，并设置另外一个定时器，知道函数请求中止并超过期间间隔才会执行。

function scrollFn(){
    console.log(1)
}
function throttle(method,context){
    clearTimeout(method.tId);
    method.tId=setTimeout(function(){
        method.call(context)
    },300)
}
window.onscroll=function(){
    throttle(scrollFn)
}

throttle函数接收两个参数，即要执行的函数及执行环境，若是执行环境未定义，默认则为windows。在这个函数中，会在第一次执行时为method顶一个定时器属性，在指定时间间隔（300）内再次执行时会清楚上一次定义的定时器并建立新定时器知道中止。

 

 2：网上还有一种解决方案：

function throttle(method,delay){
    var timer=null;
    return function(){
        var context=this, args=arguments;
        clearTimeout(timer);
        timer=setTimeout(function(){
            method.apply(context,args);
        },delay);
    }
}

 调用结果和第一种结果相同，都能有效的阻止函数重复调用，不一样的是，第一种将定时器设置为函数的一个属性，而第二种方案经过闭包来实现。首先在函数内定义一个变量timer，而后返回一个函数，咱们知道因为在返回函数中包含对timer的引用，所以timer并不会当即被清除。（咱们也能够将timer定义为全局变量）。

       以上两种方案存在一个问题，即若是事件一直触发，那么函数将永远不会被执行，这在某些时候并不符合咱们的需求，可能咱们只是想在规定时间内减小函数执行次数，因此对以上函数作以下改进：

 

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);
        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)

连接