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

scroll、resize等のイベント時に処理の連続実行を防ぐタイマー関数

Category:
Tips

jquery scrollやresizeなどのイベントはそのまま使うと、ウィンドウサイズの変更やスクロールなどのイベントが実行される操作を行うと、処理が小刻みに連続して実行されてしまいます。

これを、最後にイベントが実行されたタイミングでのみ処理が走るよう、タイマーを使って調整することができますが、流用できるようタイマー処理を関数化しました。

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

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

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

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.