防抖與節流

當事件上繫結了事件處理程式，當這個事件被持續觸發時，一直會執行這個事件處理程式，比如onscroll、onresize，而這是沒有必要的，甚至會影響效能，影響使用者體驗。因此，需要在繫結事件的時候做一些操作，使之執行事件處理程式不要那麼頻繁。主要有兩種思路。

一、函式防抖

當持續觸發事件後，一段時間後沒有再觸發這個事件，執行事件處理程式。如果在設定時間到來之前，再次觸發了這個事件，則重新開始計時

var timer = null

; document.body.onscroll = function
(), 300);
};

二、函式節流

var canrun = true

; document.body.onscroll = function
() canrun = false
; settimeout(
function
(), 300);
};

節流與防抖

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

防抖與節流

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

節流與防抖

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