JS 的防抖和節流

從實用角度來講，JS的防抖和節流，屬於前端技術的「性能優化」。

 

防抖：

假設有一個事件函數，在第一次觸發該事件時，先不執行函數，而是等待1秒後再執行，那麼：

　　1. 若是在1秒內再次觸發該事件，則該事件函數不執行，1秒時間從新計算

　　2. 若是在1秒內沒有再次觸發該事件，則執行該事件函數

達到的效果就是，在1秒內屢次觸發事件，只會執行一次函數。

既然涉及到了計時，那麼就須要 setTimeOut 這個函數，還須要一個變量來存儲這個計時，考慮保護全局變量純淨，咱們能夠使用閉包處理。

 

節流：

 假設有一個事件函數，在第一次觸發該事件後，設定一個閾值1秒，在這1秒內不論觸發多少次事件，都不執行函數。等1秒時間到了，不論有沒有觸發事件，都執行一次函數。

 

使用場景：

1. 搜索框input事件，例如要支持輸入實時搜索能夠使用節流方案（間隔一段時間就必須查詢相關內容），或者實現輸入間隔大於某個值（如500ms），就當作用戶輸入完成，而後開始搜索，具體使用哪一種方案要看業務需求。
2. 頁面resize事件，常見於須要作頁面適配的時候。須要根據最終呈現的頁面狀況進行dom渲染（這種情形通常是使用防抖，由於只須要判斷最後一次的變化狀況）