Js中的防抖與節流

　　在實際開發中，咱們常常須要綁定一些持續觸發的事件，如resize、scroll，mousemove，input等，瀏覽器在默認狀況下會對事件處理函數無限制的調用，這樣就會加劇瀏覽器的負載，致使用戶體驗不好，有些還會頻繁向後臺請求數據，對服務器形成沒必要要的壓力有些狀況下咱們不須要事件持續觸發過程當中頻繁的去執行事件處理函數，或者更但願把屢次計算合併成一次，只操做一個精確點。對此，咱們能夠採用防抖（debounce）和節流（throttle）的方式來減小調用頻率，同時又不影響實際效果。

 

函數防抖（debounce）

　　函數防抖（debounce）：當持續觸發事件時，必定時間段內沒有再觸發事件，事件函數就執行一次，若是在該時間段內又觸發了事件，就從新開始延時。也就是說當一個用戶一直觸發這個事件函數，且每次觸發函數的間隔小於設定事件，那麼防抖的狀況下就執行一次。

　　如上圖，在持續觸發scroll事件時，並不執行handle函數，當1000毫秒內沒有觸發scroll事件時，纔會延時觸發scroll事件

防抖函數使用場景：

• 實時搜索框（根據輸入框的數據發送ajax請求）（keyup）
• 文本輸入的驗證（連續發送文字發送ajax請求驗證，但只驗證最後一次輸入的內容）（input）
• 判斷scroll是否滾動到底部（scroll）

實現一個簡單的debounce：

 1 // 防抖
 2         function debounce(fn, wait) {
 3             var timeout = null;
 4             return function () {
 5                 if (timeout !== null) clearTimeout(timeout);
 6                 timeout = setTimeout(fn, wait);
 7             }
 8         }
 9         // 處理函數
10         function handle() {
11             console.log(Math.random());
12         }
13         // 滾動事件
14         window.addEventListener('scroll', debounce(handle, 1000));

　　當持續觸發scroll事件時，事件處理函數handle只在中止滾動1000毫秒以後纔會調用一次，也就是說在持續觸發scroll事件的過程當中，事件處理函數handle一直沒有執行。

 

函數節流（throttle）

　　函數節流（throttle）：當持續觸發事件時，保證必定時間段內只調用一次事件處理函數。節流通俗解釋就好比咱們水龍頭放水，閥門一打開，水嘩嘩的往下流，秉着勤儉節約的優良傳統美德，咱們要把水龍頭關小點，最好是如咱們心意按照必定規律在某個時間間隔內一滴一滴的往下滴。

 

　　如上圖，持續觸發scroll事件時，並不當即執行handle函數，每隔1000毫秒纔會執行一次handle函數。

防抖函數使用場景：

• 窗口調整（resize）

• 頁面滾動（scroll）

• DOM元素的拖拽功能實現（mousemove）

• 相似電商搶購商品時的瘋狂點擊搶購按鈕（mousedown）

實現一個簡單的throttle（時間戳版）：

 1 var throttle = function (func,delay){
 2             var prev = Date.now();
 3             return function (){
 4                 var context = this;
 5                 var args = arguments;
 6                 var now = Date.now();
 7                 if(now - prev >= delay){
 8                     func.apply(context,args);
 9                     prev = Date.now();
10                 }
11             }
12         }
13         // 事件處理函數
14         function handle(){
15             console.log(Math.random());
16         }
17         // scroll事件
18         window.addEventListener('scroll',throttle(handle,1000));

　　當高頻事件觸發時，第一次會當即執行（給scroll事件綁定函數與真正觸發事件的間隔通常大於delay），然後再怎麼頻繁地觸發事件，也都是每delay時間才執行一次。而當最後一次事件觸發完畢後，事件也不會再被執行了 （最後一次觸發事件與倒數第二次觸發事件的間隔小於delay，爲何小於呢？由於大於就不叫高頻了呀）。

另外一個throttle例子（定時器版）：

 1 var throttle = function (func, delay) {
 2             var timer = null;
 3             return function () {
 4                 var context = this;
 5                 var args = arguments;
 6                 if (!timer) {
 7                     timer = setTimeout(function () {
 8                         func.apply(context, args);
 9                         timer = null;
10                     }, delay);
11                 }
12             }
13         }
14 
15         function handle() {
16             console.log(Math.random());
17         }
18         window.addEventListener('scroll', throttle(handle, 1000));

　

　　當觸發事件的時候，咱們設置一個定時器，再次觸發事件的時候，若是定時器存在，就不執行，直到delay時間後，定時器執行執行函數，而且清空定時器，這樣就能夠設置下個定時器。當第一次觸發事件時，不會當即執行函數，而是在delay秒後才執行。然後再怎麼頻繁觸發事件，也都是每delay時間才執行一次。當最後一次中止觸發後，因爲定時器的delay延遲，可能還會執行一次函數。

　　節流中用時間戳或定時器都是能夠的。更好的是結合時間戳與定時器使用，當第一次觸發事件時立刻執行事件處理函數，最後一次觸發事件後也還會執行一次事件處理函數。

另外一個throttle例子（時間戳+定時器版）：

 1 var throttle = function (func, delay) {
 2             var timer = null;
 3             var startTime = Date.now();
 4             return function () {
 5                 var curTime = Date.now();
 6                 var remaining = delay - (curTime - startTime);
 7                 var context = this;
 8                 var args = arguments;
 9                 clearTimeout(timer);
10                 if (remaining <= 0) {
11                     func.apply(context, args);
12                     startTime = Date.now();
13                 } else {
14                     timer = setTimeout(func, remaining);
15                 }
16             }
17         }
18 
19         function handle() {
20             console.log(Math.random());
21         }
22         window.addEventListener('scroll', throttle(handle, 1000));

　　在節流函數內部使用開始時間startTime、當前時間curTime與delay來計算剩餘時間remaining，當remaining<=0時表示該執行事件處理函數了（保證了第一次觸發事件就能當即執行事件處理函數和每隔delay時間執行一次事件處理函數）。若是還沒到時間的話就設定在remaining時間後再觸發 （保證了最後一次觸發事件後還能再執行一次事件處理函數）。固然在remaining這段時間中若是又一次觸發事件，那麼會取消當前的計時器，並從新計算一個remaining來判斷當前狀態。

 

總結：

　　函數防抖：將幾回操做合併爲一此操做進行。原理是維護一個計時器，規定在delay時間後觸發函數，可是在delay時間內再次觸發的話，就會取消以前的計時器而從新設置。這樣一來，只有最後一次操做能被觸發。

　　函數節流：使得必定時間內只觸發一次函數。原理是經過判斷是否到達必定時間來觸發函數。

　　區別： 函數節流無論事件觸發有多頻繁，都會保證在規定時間內必定會執行一次真正的事件處理函數，而函數防抖只是在最後一次事件後才觸發一次函數。 好比在頁面的無限加載場景下，咱們須要用戶在滾動頁面時，每隔一段時間發一次 Ajax 請求，而不是在用戶停下滾動頁面操做時纔去請求數據（常見的大型網站在進行數據訪問時都是經過滾動頁面每隔一段時間發送一個ajax進行數據請求）。這樣的場景，就適用函數節流來實現。

 

參考連接：https://mp.weixin.qq.com/s/Vkshf-nEDwo2ODUJhxgzVA