在實際開發中，我們經常會遇到一類需求：根據input輸入容來校驗或者搜尋資料，根據視窗的大小變化來進行相關操作等。如果事件操作函式跟使用者的操作保持實時同步，那麼當使用者的操作十分頻繁時，就會多出許多無用的事件操作，並加重瀏覽器的負擔，影響頁面的效能。這時我們可以採用debounce（防抖）和throttle（節流）的方式來減少呼叫頻率，同時又不影響實際效果。
函式防抖（debounce）：當持續觸發事件時，一定時間段內沒有再觸發事件，事件處理函式才會執行一次，如果設定的時間到來之前，又一次觸發了事件，就重新開始延時。可能比較抽象，這裡寫個簡易的防抖函式：
// 函式防抖
function debounce (fn, wait)
tiemout = settimeout(fn, wait);
}}// 事件處理函式
function
print
() window.addeventlistener('resize', debounce(print, 1000));
複製**
函式節流（throttle）：當持續觸發事件時，保證一定時間段內只呼叫一次事件處理函式。就好比人的眨眼睛，就是一定時間內眨一次。這是函式節流最形象的解釋。實現函式節流主要有兩種方式：時間戳與定時器。這裡兩種方式都簡單寫一下，其實原理是相同的：
// 函式防抖(時間戳)
function throttleone (fn, delay)
}}// 函式防抖(定時器)
function throttletwo (fn, delay) , delay);}}
}複製**
節流與防抖
瀏覽器中某些計算和處理要比其他的昂貴，例如在瀏覽器中操作dom比非dom互動需要更多的記憶體和cpu的事件，連續嘗試進行過多的dom相關操作可能ui導致瀏覽器掛起，有時甚至會崩潰。尤其在ie中使用onresize事件處理程式的時候容易發生，當調整瀏覽器大小的時候，該事件會連續觸發。在onresize...
防抖與節流
防抖 當事件持續觸發，一定時間內沒有觸發事件函式處理一次。比如輸入框的ajax請求做模糊查詢 節流 當時間持續觸發，在一秒內只能觸發一次。比如滾動條持續向下滾動，載入更多資料 function debounce fn,wait function throttle func,delay functio...
防抖與節流
防抖和節流在很多場景下都可以有效的提公升程式的效能和減輕伺服器的壓力.估計大多數人都使用過這兩個工具函式 例如在lodash中以函式或裝飾器的模式to use 那麼如何實現自己的防抖和節流函式呢?定義 實現 具體思路的在注釋中體現,因為並不複雜 防抖 函式防抖 param fn 頻繁觸發的函式 ty...