節流與防抖

節流和防抖，都是優化高頻率執行操作的有效手段。

功能：連續的事件，只在最後一次觸發時執行操作

應用場景：最常見的就是輸入框驗證，如：使用者註冊時候的手機號碼驗證或郵箱驗證。只有等使用者輸入完畢後，才檢查格式是否正確；搜尋框sug請求

防抖函式的實現

function debounce (fn, wait) , wait);

}}// 較為全面的debounce
function debounce (func, wait, immediate) 
};let callnow = immediate && !timeout;
cleartimeout(timeout);
timeout = settimeout(later, wait);
if (callnow) 
};}

應用場景：多數在監聽頁面元素滾動事件的時候會用到。因為滾動事件，是乙個高頻觸發的事件。

節流函式的實現

// 時間戳版

function throttle (fn, wait) 
}}// settimeout 版
function throttle (fn, wait) 
let context = this;
let args = arguments;
timer = settimeout(function () , wait);
}}// 較為完整版
function throttle (func, wait, options) ;
let later = function later() ;
let throttled = function throttled() 
previous = now;
if (!timeout) context = args = null;
} else if (!timeout && options.trailing !== false) 
return result;
};throttled.cancel = function () ;
return throttled;
}

節流與防抖

瀏覽器中某些計算和處理要比其他的昂貴，例如在瀏覽器中操作dom比非dom互動需要更多的記憶體和cpu的事件，連續嘗試進行過多的dom相關操作可能ui導致瀏覽器掛起，有時甚至會崩潰。尤其在ie中使用onresize事件處理程式的時候容易發生，當調整瀏覽器大小的時候，該事件會連續觸發。在onresize...

防抖與節流

防抖 當事件持續觸發，一定時間內沒有觸發事件函式處理一次。比如輸入框的ajax請求做模糊查詢 節流 當時間持續觸發，在一秒內只能觸發一次。比如滾動條持續向下滾動，載入更多資料 function debounce fn,wait function throttle func,delay functio...

節流與防抖

在實際開發中，我們經常會遇到一類需求 根據input輸入容來校驗或者搜尋資料，根據視窗的大小變化來進行相關操作等。如果事件操作函式跟使用者的操作保持實時同步，那麼當使用者的操作十分頻繁時，就會多出許多無用的事件操作，並加重瀏覽器的負擔，影響頁面的效能。這時我們可以採用debounce 防抖 和thr...