防抖與節流

當事件上綁定了事件處理程序，當這個事件被持續觸發時，一直會執行這個事件處理程序，好比onscroll、onresize，而這是沒有必要的，甚至會影響性能，影響用戶體驗。所以，須要在綁定事件的時候作一些操做，使之執行事件處理程序不要那麼頻繁。主要有兩種思路。

1、函數防抖

　　當持續觸發事件後，一段時間後沒有再觸發這個事件，執行事件處理程序。若是在設定時間到來以前，再次觸發了這個事件，則從新開始計時

    var timer = null;
    document.body.onscroll = function(){
        clearTimeout(timer); // 清除未執行的代碼，重置回初始化狀態
        timer = setTimeout(function(){
            console.log("函數防抖");
        }, 300);
    };

2、函數節流

    var canRun = true;
    document.body.onscroll = function(){
        if(!canRun){
            // 判斷是否已空閒，若是在執行中，則直接return
            return;
        }
        canRun = false;
        setTimeout(function(){
            console.log("函數節流");
            canRun = true;
        }, 300);
    };