js如何降低事件處理函式的執行頻率

本章節介紹一下如何給瀏覽器減輕一下負擔。

大家知道我們可以給事件註冊事件處理函式，比如為一個按鈕註冊一個click事件處理函式。

點選此按鈕就會執行函式，當然這通常不會給瀏覽器帶來什麼壓力。

但是也有例外的情況，比如為window註冊resize事件處理函式，如果頻繁快速的調整視窗的尺寸，這將給瀏覽器帶來巨大的壓力，因為沒調整一下視窗尺寸，那麼頁面的元素尺寸等等資料都要被瀏覽器重新計算渲染。

下面就通過程式碼例項介紹一下如何給瀏覽器減輕一下負擔。

更多內容可以參閱函式節流throttle和debounce程式碼演示一章節。

程式碼例項如下:

[JavaScript] 純文字檢視 複製程式碼
var updateLayou =_.debounce(function(e){
  //code
}, 500); 
 
window.addEventListener("keydown", updateLayout, false);
_.debounce = function(func, wait, immediate) {
  var timeout;
  return function() {
    var context = this, args = arguments;
    var later = function() {
      timeout = null;
      if (!immediate) func.apply(context, args);
    };
    var callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func.apply(context, args);
  };
};

上面的程式碼的核心其實取自underscore.js，此js庫中有兩種方式的函式節流，分別是throttle和debounce，本章節只分析一下debounce的實現原理，跟多內容可以參閱js的函式節流和throttle和debounce詳解一章節。

上面的程式碼可以針對比如連續多次按鍵或者按住按鍵不放的情況，下面對程式碼進行一下分析。

一.程式碼註釋:

1._.debounce = function(func, wait, immediate) {}，此函式可以返回一個函式，將此返回的函式作為事件處理函式會實現函式節流效果。func引數規定原始的事件處理函式，第二個引數規定延遲執行的時間，用毫秒作為單位，第三個引數規定第一次事件處理函式執行是否延遲，是個布林值，如果為true表示不延遲，如果為false表示延遲。

2.var timeout，宣告一個變數用來儲存定時器函式的返回值。

3.return function(){}，返回一個函式物件，此函式被當做時間處理函式以後會具有節流功能。

4.var context = this, args = arguments，將this引用賦值給變數context，將arguments物件賦值給變數args。

5.var later = function() {

  timeout = null;

  if (!immediate) func.apply(context, args);

}，此函式是要延遲執行時，定時器函式呼叫的函式。

timeout = null，設定此值為null，這個很重要，當immediate引數為true的時候，可以用來說明兩次事件處理函式呼叫的間隔是否超過了指定的延遲時間，設定為null說明定時器函式執行了，已經超過了延遲時間。

if (!immediate) func.apply(context, args)，如果不是立即執行，那麼就呼叫func函式。

6.var callNow = immediate && !timeout，用來獲取一個標識，用來表示是否一開始可以立馬執行或者是否超過指定的延遲間隔，可以進行下一次的執行了。

7.clearTimeout(timeout)，停止定時器函式的執行，如果連續處罰事件的事件間隔在延遲時間之內，那麼將不會得到執行。

8.timeout = setTimeout(later, wait)，一個定時器函式的使用。

9.if (callNow) func.apply(context, args)，根據條件判斷是否執行func函式。

二.相關閱讀:

1.addEventListener()方法可以參閱addEventListener()和attachEvent()函式的用法一章節。

2.apply()方法可以參閱javascript apply()一章節。

3.setTimeout()方法可以參閱setTimeout()一章節。