2014/05/12

[jQuery] ajaxで複数回の処理を順番に実行するよ

カテゴリー:
タグ:

jQueryで、ajaxを使ってphpに「とある処理」を複数回やらせたいと思いまして。はじめは、php側で処理をしていたのですが、1件1件の処理に時間がかかるんですね。なので、しばらく待ったのにタイムアウトエラーが返ってきたりすることもあって、イラッとしたわけです。そこで、複数の処理はphp側でするのをやめて、ajaxを複数回実行する、という方法で行こうとしたんですね。

ただ、単にfor文で繰り返し実行するようにすると、同時に処理が進んでしまうのですが、今回は「1つ1つ順番に」処理したい。ということで、再帰的に書いて処理しました。

ここでは、「実験」と書かれた要素をクリックしたら、phpに複数回通信するということを書いていきます。まずは、htmlの部分。

<span id="jikken">実験</span>

まぁこれはあんまり意味ないですね。で、これをクリックしたときの処理をこういう風に書きます。

$('#jikken').on('click', function(){
  jikkenPost(1);
});

で、そのjikkenPostというのは、次のように定義します。

function jikkenPost(index){
  if(index > 5){ return false; }//繰り返す回数
  $.post( 'jikken.php', {
    data: data
  }, function(){
    $('#jikken').html( index + '件目の処理が終わりました');
    jikkenPost(index + 1);
  });
}

通信がsuccessした時に、もう一度自分自身を呼ぶわけですね。indexは処理の回数を制限するのに使っています。同じ処理をするにはこれでOKですね。

前の記事:
次の記事: