Nakajiman Software Blog: Delay Plugin for jQuery 1.1.2

メソッドチェーンの中で、指定した関数をその場で実行せず、遅延して後回しにできる jQuery プラグインです。jQuery の操作を後でまとめて実行したり、一定の間隔でステップ実行できるので、その特性を活かした様々な応用が期待できます。

後回しにする関数は delay メソッドで指定します。このとき、指定した関数はキューに追加するだけで、その関数は実行しません。delay メソッドで繰り返し関数を指定して、後回しにする関数をどんどん追加していきます。

後回しにする関数は $.resume メソッドで実行します。$.resume メソッドの引数には実行間隔が指定でき、その実行間隔の周期で、キューの中の関数を先頭から1つずつ順番に実行します。実行間隔はミリ秒の単位で指定します。省略したときは 10 ミリ秒です。なお、$.resume メソッドを実行し直すと、現在の実行周期を変更できます。

キューの中の関数がある限り、その関数を実行し続けようとします。ですので、キューの中に関数があるとき、delay メソッドで関数を追加すると、その関数も実行します。ただし、キューの中の関数がなくなると停止となり、delay メソッドで関数を実行しても、その関数は実行しません。そのときは $.resume メソッドを呼び出して再開してください。

Delay Plugin for jQuery ダウンロード

/*
 * Delay Plugin for jQuery 1.1.2
 *
 * Copyright(C) 2007 LEARNING RESOURCE LAB.
 * http://postal-search-apis-and-solutions.blogspot.com/
 *
 * Dual licensed under the MIT (MIT-LICENSE.txt)
 * and GPL (GPL-LICENSE.txt) licenses.
 */
(function($) {
  
  // $.delay
  $.delay = {

    // $.delay.queue
    queue: [],
    
    // $.delay.timer
    timer: null,

    // $.delay.pause
    pause: function() {
      if (!$.delay.timer)
        return;
      clearInterval($.delay.timer);
      $.delay.timer = null;
    }
  };

  // $.resume
  $.resume = function(interval) {
    $.delay.pause();
    $.delay.timer = setInterval(function() {
      var fn = $.delay.queue.shift();
      fn ? fn() : $.delay.pause();
    }, interval || 10);
  };

  // delay
  $.fn.delay = function(fn) {
    var self = this;
    $.delay.queue.push(function() {
      self.each(fn);
    });
    return self;
  };

})(jQuery); // function($)

次のサンプルは、テキストを入力して実行ボタンをクリックすると、入力したテキストをタイプライタ風に再現するものです。

入力したテキストを1文字ずつに分割して、$.each メソッドで1文字ずつ繰り返しています。その繰り返しの中で、1文字の span タグを組み立てて、その span タグを p タグの末尾に追加しています。このとき、delay メソッドを使って span タグの追加を後回しにしています。

最後に $.resume メソッドを使って、後回しにした関数を200ミリ秒の周期で実行しています。200ミリ秒ごとに p タグに span タグが追加されることになり、入力したテキストを1文字ずつタイプライタで入力したかのように見えます。

このサンプルを検索ボックスに適用すれば、テレビ CM でよく見かける「○○で検索！」のような動きのある効果にも応用できそうですね。

Delay Plugin for jQuery サンプル

<form onsubmit="run(this.q.value); return false;">
<input type="text" name="q" value="Tag Plugin for jQuery 1.1.2" />
<input type="submit" name="g" value="実行" />
</form>
<p id="r"></p>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.delay.js"></script>
<script type="text/javascript">
//<![CDATA[
function run(q) {
  $.each(q.split(''), function(i, v) {
    $('<span />')
      .text(v)
      .delay(function() {
        $('#r').append(this);
      });
  });
  $.resume(200);
} 
//]]>
</script>