s對頻繁觸發事件的 函數防抖 和 函數節流

1.場景

函數防抖：註冊時郵箱的輸入框，隨着用戶的輸入，實時判斷郵箱格式是否正確。此時，每一次的用戶輸入都觸發郵箱格式檢測事件，形成了浪費，因而設置兩次輸入之間的時間間隔大於800ms時（用戶結束輸入時），再執行檢查郵箱格式。

$("#email").on("keyup",checkEmail());
function checkEmail(){
    let timer = null;
    return function(){
        clearTimeout(timer);
        timer = setTimeout(function(){
            console.log("執行檢查");
        },800);
    }
}

當第一次輸入事件觸發，設置定時：在800ms以後執行檢查。

假如只過了100ms，上次的定時還沒執行，此時清除定時，從新定時800ms。

緊跟着又來了一次輸入，上次定時依然沒執行，再次清除定時，從新定時800ms。

...

直到最近一次的輸入，後面沒有緊鄰的輸入了，這最近一次的輸入定時計時結束，終於執行了檢查代碼。

結果是：若是兩次輸入觸發事件的時間間隔不足800ms的，不執行檢查代碼。 兩次觸發事件的時間間隔大於800ms了，則前面的執行檢查。

這就是傳說中的 函數防抖。

2.

//函數節流
//一個加載新聞的列表頁，只要滾動到頁面的最下面就繼續加載一部分新聞出來，即滾動加載。
//這時要監聽滾動事件，判斷若滾動到頁面底部了，就執行加載新聞的代碼。
//因爲滾動事件費城頻繁，稍微滾動一下就會觸發許屢次，若是頻繁觸發的滾動，每次都去檢查是否到了頁面底部形成了浪費。
//所以設置一個開關，一次只能有一個觸發執行，並對執行設置計時一段時間再執行，執行完畢以後再解鎖，這就是函數節流

$(window).scroll(loadMore());function loadMore(){    var canRun = true;    return function(){        if(!canRun){return};        canRun = false;        setTimeout(function(){            console.log("執行滾動事件");            var docHeight = $(document).height();            var winHeight = $(window).innerHeight();            var scrollDistance = $(window).scrollTop();            if(docHeight-(winHeight+scrollDistance)<=100){                console.log('加載中...');            }            canRun = true;        },600);    }}