一個簡單的javascript節流器實現

節流器

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

/**
* 節流器
* @param [function] fn 事件觸發后要調用的函數，也就是要節流的函數
* @param [object]context fn的執行上下文對象，沒有執行對象設為null即可
* @param [number] delay 延緩執行的時間間隔 毫秒
* @param param fn需要的參數
* @return 無
*/
function throttle(fn, context, delay, param) {
  clearTimeout(fn.timeoutId);

  fn.timeoutId = setTimeout(function () {
    fn.call(context, param);
  }, delay);
}

 

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

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

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

// 節流器
function throttle(fn, delay, param) {
  setTimeout(function () {
    fn(param);
  }, delay);
}

---

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