事件節流

在寫前端頁面的表單驗證時，經常會遇到輸入框輸入內容的時候進行表單的驗證，或者瀏覽器視窗縮放的時候觸發一個事件，亦或是瀏覽器發生滾動的時候觸發函式。

由於輸入、瀏覽器視窗縮放、頁面滾動都是在很快的時間內發生的事情，如果每次輸入或者縮放視窗都要去執行ajax請求的話，會影響頁面的效能，此時，我們就需要用到事件節流。

下面寫兩種比較常用的事件節流方法

方法一：setTimeout（消除抖動）

var timer;
$("#phone").on("keyup",function(){
    clearTimeout(timer);
    timer = setTimeout(function(){
        alert("輸入內容進行判斷");
    },500)
});複製程式碼

我們希望使用者只有在最後一次輸入的時候才會進行判斷，以上程式碼每次輸入的時候，都會重置計時器，只有當使用者輸入後時間超過0.5秒（使用者結束輸入）才會進行判斷，彈出“輸入內容進行判斷”彈窗，平時專案中這裡就可以寫ajax請求了。

方法二：計時器節流

$(document).ready(function() {
    var scrolled = false;

    $(window).scroll(function() {
        scrolled = true;
    });

    setInterval(function() {
        if (scrolled) {
            checkScrollPosition();
            scrolled = false;
        }
    }, 250);

    checkScrollPosition();
});複製程式碼

文件載入完成後給定一個scrolled為false，當頁面滾動的時候scrolled為true，計時器每隔250毫秒執行一次，判斷scrolled的值是否為true，若為true則執行checkScrollPosition（），並且將scrolled賦值為false。