2012年6月11日月曜日

javascriptでタスクマネージャつくりはじめ


jQueryのプラグインなどのいろんな機能で一連の処理を組み立てたいのですが、
どうも、連続処理のやり方が不慣れでしっくり来ないため。
タスクをタイムライン的に登録して実行出来ればいいなと思い
javascript自体がよくわかってないのですが、ちょっと挑戦中です。
http://developmentor.lrlab.to/postal/jquery/jquery.delay.html
こちらを参考にさせていただいています。

<script type="text/javascript">
  (function($) {
    $.taskTable =
    {
      queue: []
    };
    $.taskNext = function(group)
    {
      $.taskStart(group);
    }
    $.taskStart = function(group)
    {
      var self = this;
      var group = group || 'anonymous';
      var obj = $.taskTable.queue[group].shift();
      if(void 0 !== obj)
      {
        if(obj.func)
        {
          obj.func();
          if(0<=obj.interval)
          {
            setTimeout(function(){$.taskStart(group);}, obj.interval);
          }
        }
      }
    };

    $.fn.taskTable = function(fn,interval,group)
    {
      var self = this;
      var group = group || 'anonymous';
      if(void 0 === $.taskTable.queue[group])
      {
         $.taskTable.queue[group] = Array();
      }
      $.taskTable.queue[group].push(
      {'func': function()
        {
          self.each(fn);
        },
        'interval':interval
      });
    };
  })(jQuery);

  function test(name, fnc)
  {
    alert(name);
    if(void 0 !== fnc)
    {
      fnc();
    }
  }

  $(document).ready(function(){
    $('#test1').taskTable( function(){test('test1A',function(){$.taskNext('test')})},-1,'test' );
    $('#test1').taskTable( function(){test('anonymous',function(){$.taskNext('test')})},-1,'test' );
    $('#test2').taskTable( function(){test('test1B',function(){$.taskNext('test')})},-1,'test' );
    $('#test2').taskTable( function(){test('anonymous',function(){$.taskNext()})},-1 );
    $.taskStart('test');
  });
</script>
<body>
<div id="test1">test1</div>
<div id="test2">test2</div>
</body>
とか。

参考のページでは起動関数の引数で一定間隔の実行をしていますが、
今回はそれぞれで次に進むためのインターバルか次に進むためのコールバックにて次々に実行させています。

 $('selecter').taskTable( function(){alert('test1')},1000);
 $('selecter').taskTable( function(){alert('test'2)},1000);
 $.taskStart();

これが処理の登録で第一引数の無名関数が順番に行って欲しい処理自体です。
で第二引数の1000っつーのがつぎの処理まで1000m秒待てっつーことです。
で、ここで時間指定して先に進むんじゃなくて処理が終わったら次みたいのを

 $('#selecter').taskTable( function(){test('test1',function(){$.taskNext()})},-1);
 $('#selecter').taskTable( function(){test('test2',function(){$.taskNext()})},-1);
 $.taskStart();

testつーのは処理が割ったらコールバックを呼ぶ仕組みなのでそのコールバックから
$.taskNext()を呼ぶことで次に進むようにしてます。
最後の-1っつーブッサイクなのはコールバック使っているから時間とか指定しないっつー不細工です。
タスクの登録時にgroupを指定したりしていますが、これもブサイクな作りで
$.taskStart('group');はいいとしてもコールバックに
$.taskNext('group');と書かないといけないとかだっさくて、以下に初心者かよくわかるものとなっております。さっきの-1もそうです。

まあ、ひとまずはこれをもうちょっといい感じにしていこうかと思うのですが、
本当にこれ車輪の大発明であって欲しいのです。
めんどうなので、いい感じのjQueryプラグイン無いですか?
本当にだれか教えて欲しいのです。
ぐぐってもみつけられないのですが、キーワード何を入れればいいのでしょうか。
僕の方向性が間違っているんでしょうか。

助けてください。









0 件のコメント:

コメントを投稿