JS的節流和防抖

爲何要有節流和防抖

　　在前端開發中有一部分的用戶行爲會頻繁的觸發事件執行，好比窗口的resize、scroll，提交表單等。而事件處理函數調用的頻率無限制，極可能致使界面卡頓，甚至瀏覽器的崩潰。函數節流和函數防抖就是爲了解決相似需求而生的

函數防抖

　　在事件被觸發n秒後再執行回調，若是在這n秒內又被觸發，則從新計時。也就是說，短期內不管事件觸發多少次，老是隻會執行最後一次事件的回調方法

　　看一個例子

　　

 

　　運行結果

　　

　　先來講一下個人輸入：1 》2 》3 》4 》5 》6 》7 》8 》9，輸入9次，打印了9次，也就是說輸入一次打印一次；

　　能夠看到，咱們只要按下鍵盤，就會觸發此次ajax請求。不只從資源上來講是很浪費的行爲，並且實際應用中，用戶也是輸出完整的字符後，纔會請求；

　　利用防抖

　　　　將請求函數 ajax 做爲 setTimeout 的回調函數，設置 setTimeout 的時間爲wait。須要一個變量 timeout 來保存當前所處的計時階段，若是距離上次事件發生的 wait 時間段內再次發生該事件，那麼把 timeout 清楚，即把上次的 setTimeout 事件清除，並從新計時；若是 wait 期間內沒有再次觸發相同事件，那麼執行 fn 方法，即執行 ajax 方法。

　　

 

　　運行結果

　　

　　仍是先說下我是怎麼輸入這9個數字的：先輸入123，停了1秒多（打印出123），再次輸入456，又停了一秒多（打印出123456），輸入789（1秒後，打印出123456789）；

　　當持續觸發 keyup 事件時，ajax 請求函數只在keyup事件中止1000毫秒以後纔會調用一次，也就是說，在持續觸發keyup事件的過程當中，請求函數ajax一直沒有執行；

　　能夠看到，咱們加入了防抖之後，當你在頻繁的輸入時，並不會發送請求，只有你在指定時間間隔內沒有輸入時，纔會執行函數。若是中止輸入可是在指定時間間隔內又輸入，會從新觸發計時。

函數節流

　　引用1：當持續觸發事件時，保證必定時間段內只調用一次事件處理函數。也就是說，預約一個函數只有在大於等於執行週期時才執行，週期內調用不執行；

　　引用2：規定在一個單位時間內，只能觸發一次函數。若是這個單位時間內觸發屢次函數，只有一次生效；

　　舉個例子

　　　　當事件觸發的時候，咱們設置一個定時器，再次觸發事件的時候，若是定時器存在，就不執行，直到 wait 時間後，定時器執行函數，而且清空定時器，這樣就能夠設置下個定時器；

　　　　當第一次觸發事件時，不會當即執行函數，而是延遲 wait  秒後才執行。然後再怎麼頻繁觸發事件，也都是每 wait 時間才執行一次。當最後一次中止觸發後，因爲定時器的 wait 的延遲，可能還會執行一次函數；

　　

　　運行結果

　　

　　個人輸入：在1秒以內輸入 123，可是隻打印出了 1，說明在 1 秒內觸發屢次事件，只會執行一次。

適用場景

　　debounce（防抖）

　　　　一、search搜索聯想，用戶在不斷輸入值時，用防抖來節約請求資源

　　　　二、window觸發 resize 的時候，不斷地調整瀏覽器窗口大小會不斷觸發這個事件，用防抖來讓其只觸發一次

　　throttle（節流）

　　　　一、鼠標不斷點擊提交，一段時間內只讓一次點擊生效

　　　　二、監聽滾動事件，好比是否滑到底部自動加載更多

 

 

 

參考博客：http://www.javashuo.com/article/p-pecyxiha-mx.html