🕒 2014/05/12
🔄 2023/04/22
[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ですね。