節流器

javascript的節流器主要用于延緩某些動作的執行，比如ajax請求，如果input框注冊了input事件，那么當用戶輸入時就會持續的觸發這個事件，如果回調函數中持續的通過ajax調用后臺的接口，就會對服務器產生一定壓力。這時就可以考慮采用某種方法來延緩ajax請求，比如可以這么做，當觸發input事件后，延緩0.5s再調用后臺的接口，這樣在一定程度上就可以減輕服務端的壓力。
下面來實現一個簡單的節流器

1 /** 2 * 節流器 3 * @param [function] fn 事件觸發后要調用的函數，也就是要節流的函數 4 * @param [object]context fn的執行上下文對象，沒有執行對象設為null即可 5 * @param [number] delay 延緩執行的時間間隔 毫秒 6 * @param param fn需要的參數 7 * @return 無 8 */ 9 function throttle(fn, context, delay, param) { 10 clearTimeout(fn.timeoutId); 11 12 fn.timeoutId = setTimeout(function () { 13 fn.call(context, param); 14 }, delay); 15 }

?

通過參數注釋和代碼應該能夠大概看明白這個throttle要做的事情：延緩fn的執行，這個通過setTimeout函數來執行即可。
### 使用節流器
使用時也很簡單，將fn、context、delay、params傳入即可：

1 var ajaxFun = function() { // 略 }; 2 throttle(ajaxFun, null, 500, someParams);

其實上面的節流器代碼還可以再簡化，不過就沒有上面的健壯了。

1 // 節流器 2 function throttle(fn, delay, param) { 3 setTimeout(function () { 4 fn(param); 5 }, delay); 6 }

---

這篇文章最初發表在我自己折騰的博客站點上：一個簡單的javascript節流器實現，該博客用了一位前輩開源的源碼，基于thinkjs和vuejs開發，歡迎大家來逛逛。

轉載于:https://www.cnblogs.com/yangtoude/p/a-simple-javascript-throttle.html

總結

以上是生活随笔為你收集整理的一个简单的javascript节流器实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。