函數節流器

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)

連接