函式節流和函式去抖

在日常的開發過程中，會有這樣的場景，事件被頻繁的觸發，比如說我們的在輸入的時候監控keypress事件，在頁面滾動的時候監控頁面的滾動事件。比如我們監控頁面的resize事件，拉動視窗改變大小的時候，resize事件被頻繁的執行

事件處理函式簡單的話還好，但是如果是複雜的dom操作，可能會導致整個ui卡頓設定瀏覽器奔潰，而我們往往的結果就是事件結束後處理函式執行一次就行了。於是我們可以通過函式的去抖來處理

去抖（debounce）

函式呼叫n秒後才會執行，如果函式在n秒內被呼叫的話則函式不執行，重新計算執行時間（同步不斷重新設定計時器實現，例子：輸入框輸入）

實現**

/**函式的去抖動**/
function debounce(method,delay),delay);}}

測試：

function resizehandler()
window.onresize=debounce(resizehandler,500);

測試結果：

函式去抖是在我們事件結束後的一段時間內才會執行，會有乙個延遲性。現在我們有乙個需求，有乙個輸入框要求輸入聯想，在使用者輸入的過程中，需要按照一定的時間像後台傳送ajax請求，獲取資料。對於這樣的需求，我們可以通過函式節流來實現

函式節流（throttle）

函式預先設定乙個執行週期，當呼叫動作的時刻大於等於執行週期則執行該動作，然後進入下乙個新週期（通過保持動作一定時間觸發方法，例子：保持下拉載入更多）

實現**

/**函式節流**/
function throttle(method,duration)}}

測試：

function resizehandler()
window.οnresize=throttle(resizehandler,500);

結果：

需要注意的一點：函式的節流和函式的去抖都是通過減少實際邏輯處理過程的執行來提高事件處理函式執行效能的手段，並沒有實質上減少事件的觸發次數。