memocarilog

scroll や resize イベント時は、そのイベント発生中ずっと何らかの処理が行われます。特にモバイル端末の場合、処理によってはブラウザへの負担が心配です。jQuery throttle/debounce プラグインを使用するとイベント中の処理回数を減らすことができます。jQuery throttle/debounce プラグインの使い方などをまとめました。

なにをしてくれるのか

throttle/debounce プラグインではイベント中の処理を、「イベント発生中に随時実行」ではなく「イベント発生中、指定した秒数毎に実行」（throttle）又は、「イベントが終了してから、指定秒数後に実行」（debounce）というタイミングに変更することができます。

「サンプル」も作りました。

参考とダウンロード

以下ページで使い方などの説明があります。「Download」よりプラグインを入手できます。
Ben Alman » jQuery throttle / debounce: Sometimes, less is more!

GitHub からもダウンロードできます。
cowboy/jquery-throttle-debounce · GitHub

使い方

jQuery 本体と プラグインを読み込みます。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery.ba-throttle-debounce.min.js"></script>

次に以下のように記入します。

<script>
$(function(){
	$(window).on('イベント名', $.throttle ( 3000,  // ←処理を実行する秒数、
	// タイミングを「イベント終了時」にしたい場合はここを $.debounce へ変更する。

	    function(){
	       イベント中の処理
	    })　
  	);
});
</script>

イベント時の処理を $.throttle () の第二引数として記入します。$.throttle () の第一引数には処理を実行する秒数を記入します。

プラグインを使わない方法

以下のように setTimeout を使用するとイベントが終了したら処理を実行することができます。こちらの方法の方がよりシンプルな感じですね。

var timer = false;
$(window).イベント(function() {
    if (timer !== false) {
        clearTimeout(timer);
    }
    timer = setTimeout(function() {
        // イベント中の処理
    }, 秒数指定);
});

作ったサンプルデモ

throttle/debounce を使ってスクロールイベントでテキストを追加するデモと、jQuery throttle/debounce を使わずに同じ処理を行った場合のデモです。

throttle のデモ

スクロールイベント中3秒毎にテキストを追加する処理をします｜memocarilog

debounce のデモ

スクロールし終わって3秒たったらテキストを追加する処理をします｜memocarilog

jQuery throttle/debounce を使わないデモ

スクロールイベントが発生する毎にテキストを追加します｜memocarilog

サンプルデモのHTMLコード

<div id="container">
    <h1>jQuery throttle/debounce Demo </h1>
    <h2>スクロールイベント中に3秒毎にテキストを追加するサンプルデモ</h2>
    <div id="content">    
        <p>↓下へスクロール</p>    
    </div>
</div>

サンプルデモのHTML、head内コード

throttle

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery.ba-throttle-debounce.min.js"></script>
<script>
$(function(){
var cnt = 0,
    textarea = $('#content');
      
  $(window).on('scroll', $.throttle ( 3000, 
    function(){
        cnt++;
        text = $('<p>↓上か下へスクロール（追加テキスト '+ cnt +' 個目）</p>'),
        textarea.append(text); 
        if(cnt === 50){
            $(window).off('scroll');
        }
    })　
  );
});
</script>

debounce

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery.ba-throttle-debounce.min.js"></script>
<script>
$(function(){
var cnt = 0,
    textarea = $('#content');
      
  $(window).on('scroll', $.debounce ( 3000, 
    function(){
        cnt++;
        text = $('<p>↓上か下へスクロール（追加テキスト '+ cnt +' 個目）</p>'),
        textarea.append(text); 
        if(cnt === 50){
            $(window).off('scroll');
        }
    })　
  );
    
});
</script>

jQuery throttle/debounce を使わないデモ

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function(){
var cnt = 0,
    textarea = $('#content');
      
  $(window).on('scroll', function(){
        cnt++;
        text = $('<p>↓上か下へスクロール（追加テキスト '+ cnt +' 個目）</p>'),
        textarea.append(text); 
        if(cnt === 100){
            $(window).off('scroll');
        }
    });
});
</script>