debounce() | Underscore JS 日本語リファレンス

第1引数の関数を設定して第2引数の時間後(単位はミリ秒)、一番最後に受け付けた関数のみ発動する関数を返す。第3引数に true が設定された時は即時発動後、第2引数の時間は関数を受け付けない。

■使用例

function logged( txt ){
	var text = _.now();
	console.log( "re now : " + txt + " : "  + text );	
}
var re = _.debounce( logged, 2000 );
re("0");
re("1");
re("2");
re("3");
re("4");
// re("0") 〜 re("4") までは発動しない。re now : 5 : 1430745777135
re("5");

function logged( txt ){
	var text = _.now();
	console.log( "re now : " + txt + " : "  + text );	
}
var re2 = _.debounce( logged, 5000, true );
re2("re2 : 0");
re2("re2 : 1");
// re("1") 〜 re("2") までは発動しない。re now : re2 : 0 : 1430746092571
re2("re2 : 2");

■内部構造

  _.debounce = function(func, wait, immediate) {
    var timeout, args, context, timestamp, result;

// setTimeout() で呼ばれる関数。
    var later = function() {
      var last = _.now() - timestamp;

      if (last < wait && last >= 0) {
// 初回関数発動時からの経過時間が wait 以下で 0 以上の時。
        timeout = setTimeout(later, wait - last);
        
      } else {
 // 初回関数発動時からの経過時間が wait を超えた時。
        timeout = null;
        
        if (!immediate) {
 // _.debounce() の第3引数が false なら。
          result = func.apply(context, args);
          if (!timeout) context = args = null;  
        } 
      }
    };
    
// _.debounce() 設定後に返される関数。
    return function() {

// 基本的には this = グローバルオブジェクト。    	
      context = this;
 
// この関数の引数。
      args = arguments;      
      timestamp = _.now();

      var callNow = immediate && !timeout;
      
// timeout == null なら
      if (!timeout) timeout = setTimeout(later, wait);
      
      if (callNow) {
// _.debounce() の第3引数が true なら設定後の初回時の関数は以下を設定。
        result = func.apply(context, args);
        context = args = null;
      }

      return result;
    };
  };

このページのトップへ戻る
Menu