jstarted.com
JavaScript/HTML/CSSのノウハウや覚書を掲載するブログ
2014.10.27

scroll、resize等のイベント時に処理の連続実行を防ぐタイマー関数(jQuery未使用版)

Category:
Tips

以前書いた記事「scroll、resize等のイベント時に処理の連続実行を防ぐタイマー関数」では、イベント指定をjQueryに依存していたので、純粋なJavaScript製のものも書き残しておくことにしました。単純にjQuery.onをaddEventListenerにしただけですが。

コードは以下です。

var debounce = function(object, eventType, callback){
  var timer;

  object.addEventListener(eventType, function() {
    clearTimeout(timer);
    timer = setTimeout(function(){
      callback();
    }, 500);
  }, false);
};

debounce(window, 'resize', function(){
  console.log('resize finished');
});

jstarted.comはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を
獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、
Amazonアソシエイト・プログラムの参加者です。

クリエイティブ・コモンズ・ライセンス
jstarted.com by yoichi kobayashi is licensed under a Creative Commons 表示 3.0 非移植 License.