JS中的函式節流throttle詳解和優化

js中的函式節流throttle詳解和優化

在前端開發中，有時會為頁面繫結resize事件，或者為乙個頁面元素繫結拖拽事件（mousemove），這種事件有乙個特點，在乙個正常的操作中，有可能在乙個短的時間內觸發非常多次事件繫結程式。

dom操作時很消耗效能的，如果你為這些事件繫結一些操作dom節點的操作的話，那就會引發大量的計算，在使用者看來，頁面可能就一時間沒有響應，這個頁面一下子變卡了變慢了。在ie下，如果你繫結的resize事件進行較多dom操作可能直接就崩潰了。

怎麼解決？函式節流(throttle)就是一種辦法。

函式節流的原理

某些**不可以在沒有間斷的情況連續重複執行。

第一次呼叫函式，建立乙個定時器，在指定的時間間隔之後執行**。

當第二次呼叫該函式時，它會清除前一次的定時器並設定另乙個。

如果前乙個定時器已經執行過了，這個操作就沒有任何意義。

然而，如果前乙個定時器尚未執行，其實就是將其替換為乙個新的定時器。

目的是只有在執行函式的請求停止了一段時間之後才執行。

簡單點說就是：當觸發乙個事件時，先settimout讓這個事件延遲一會再執行，如果在這個時間間隔內又觸發了事件，那我們就clear掉原來的定時器，再settimeout乙個新的定時器延遲一會執行。

實際使用過程中考慮到使用者體驗問題，會在這個基礎上做一些優化。

乙個簡單實現的例子：

函式實現方式：

function
throttle(method, context) ， 100);
}

呼叫方法：

window.onresize = function
()

閉包實現方式：

var throttle = function
(fn, delay), delay);
};};

呼叫方法：

window.onresize = throttle(myfunc, 50);

-------------

上面的函式節流有個問題是：只要你在50ms內不間斷resize，myfunc就一次都不執行處理函式。

對上面的節流函式做拓展：

var throttlev2 = function
(fn, delay, mustrundelay)
if(t_curr - t_start >=mustrundelay)
else
, delay);}};
};

拓展後的節流函式公升級版，可以設定第三個引數，即必須觸發執行的時間間隔。

方法呼叫：

window.onresize = throttlev2(myfunc, 50, 100);

50ms的間隔內連續觸發的呼叫，後乙個呼叫會把前乙個呼叫的等待處理掉，但每隔100ms至少執行一次。

一開始記錄第一次呼叫的時間戳，然後每次呼叫函式都去拿最新的時間跟記錄時間比，超出給定的時間就執行一次，更新記錄時間。

-----------------

例子場景2：實現常見的搜尋功能

1.沒有使用函式節流的情況下，為input繫結keyup事件處理函式，在控制台輸出我輸入的內容。

每按下乙個鍵盤鍵，就輸出了一次。短短的一些內容，輸出了15次，如果每一次都是一次ajax查詢請求的話就發了14個請求了。在效能上的消耗可想而知。

假如我不斷地輸入，輸入了很多內容，但是我每兩次之間的輸入間隔都小於自己設定的delay值，那麼，這個querydata搜尋函式就一直得不到呼叫。實際上，我們更希望的是，當達到某個時間值時，一定要執行一次這個搜尋函式。所以，就有了函式節流的改進模式。

函式節流增強版

html：

js：

顯然，連續的輸入，到一定時間間隔之後，querydata函式必然會被呼叫，但是又不是頻繁的呼叫。達到了節流的目的，又不會影響使用者體驗。

進一步的優化可以在呼叫throttle函式之前，先對輸入的內容進行判斷，若其值為空、值不變不呼叫。