防抖動與節流

防抖動與節流

針對一些會頻繁觸發的事件如scroll、resize，若是正常綁定事件處理函數的話，有可能在很短的時間內屢次連續觸發事件，十分影響性能。因此咱們對於這種事件咱們要進行防抖動或者節流的處理來優化性能。

防抖動

防抖動：將幾回操做合併爲一此操做進行。原理是維護一個計時器，規定在delay時間後觸發函數，可是在delay時間內再次觸發的話，就會取消以前的計時器而從新設置。這樣一來，只有最後一次操做能被觸發。

<script>
    var timer=null;
    function debounce(){
        var st=document.documentElement.scrollTop||document.body.scrollTop;
        if(st>500){
            $(".menu").show();
        }else{
            $(".menu").hide();
        }
    }
    window.onscroll=function(){
        //防抖動 debounce
        clearTimeout(timer);
        timer=setTimeout(function(){
            debounce();
        },40);
    }
</script>

節流

節流：使得必定時間內只觸發一次函數。
它和防抖動最大的區別就是，節流函數無論事件觸發有多頻繁，都會保證在規定時間內必定會執行一次真正的事件處理函數，而防抖動只是在最後一次事件後才觸發一次函數。
原理是經過判斷是否到達必定時間來觸發函數，若沒到規定時間則使用計時器延後，而下一次事件則會從新設定計時器。

時間戳實現：

當高頻事件觸發時，第一次應該會當即執行（給事件綁定函數與真正觸發事件的間隔若是大於delay的話），然後再怎麼頻繁觸發事件，也都是會每delay秒才執行一次。而當最後一次事件觸發完畢後，事件也不會再被執行了。

var throttle = function(func,delay){
    var prev = Date.now();
    return function(){
        var context = this;
        var args = arguments;
        var now = Date.now();
        if(now-prev>=delay){
            func.apply(context,args);
            prev = Date.now();
        }
    }
}

定時器實現：

當觸發事件的時候，咱們設置一個定時器，再觸發事件的時候，若是定時器存在，就不執行；直到delay秒後，定時器執行執行函數，清空定時器，這樣就能夠設置下個定時器。

var throttle = fucntion(func,delay){
    var timer = null;

    return funtion(){
        var context = this;
        var args = arguments;
        if(!timer){
            timer = setTimeout(function(){
                func.apply(context,args);
                timer = null;
            },delay);
        }
    }
}