js函數節流和函數防抖

概念解釋

函數節流: 頻繁觸發,但只在特定的時間內才執行一次代碼

函數防抖: 頻繁觸發,但只在特定的時間內沒有觸發執行條件才執行一次代碼

函數節流

函數節流應用的實際場景，多數在監聽頁面元素滾動事件的時候會用到。由於滾動事件，是一個高頻觸發的事件。

如下是監聽頁面元素滾動的示例代碼：

// 函數節流var canRun = true;
document.getElementById("throttle").onscroll = function(){
    if(!canRun){
        // 判斷是否已空閒，若是在執行中，則直接returnreturn;
    }

    canRun = false;
    setTimeout(function(){
        console.log("函數節流");
        canRun = true;
    }, 300);
};
// 函數節流的要點是，聲明一個變量當標誌位，記錄當前代碼是否在執行。
// 若是空閒，則能夠正常觸發方法執行。
// 若是代碼正在執行，則取消此次方法執行，直接return。

函數抖動

函數防抖的應用場景，最多見的就是用戶註冊時候的手機號碼驗證和郵箱驗證了。

只有等用戶輸入完畢後，前端才須要檢查格式是否正確，若是不正確，再彈出提示語。

如下仍是以頁面元素滾動監聽的例子，來進行解析：

// 函數防抖var timer = false;
document.getElementById("debounce").onscroll = function(){
    clearTimeout(timer); // 清除未執行的代碼，重置回初始化狀態
    timer = setTimeout(function(){
        console.log("函數防抖");
    }, 300);
};
// 函數節流的要點，也是須要一個setTimeout來輔助實現。延遲執行須要跑的代碼。
// 若是方法屢次觸發，則把上次記錄的延遲執行代碼用clearTimeout清掉，從新開始。
// 若是計時完畢，沒有方法進來訪問觸發，則執行代碼。