Q&A
回答ありがとうございました。
ただ、申し訳ないのですが、回答の「非同期でうけとったあとソートして表示すれば」の
意味が全く分かりませんでした。
もう少しかみ砕いてご説明して頂けると助かります。
連続した ajax を順番通り実行するために、これまで「async:false」で同期させていましたが、
「async:false」は非推奨になったということで警告が出てくるため、書き直しているところです。
いろいろ調べてみると、promiseオブジェクトのステータスを監視することによって、同期的処理ができる
ということで以下のコードを書きました。
１番目の ajax では分類検索を行い、categoryText に結果（"bird" 又は "fish"）を表示します。
その表示された結果に基づいて２番目の ajax が起動し、該当する「名前」を２つ目の nameText
に表示（"swallow" 又は "carp"）するとというものです。
コンソールの結果を見てみると、２つの ajax の順序が逆になるというより、１つの ajax 内で
も前後しているようです。
ステータス１－１
ステータス１－２
ステータス２－１
ステータス２－２
の順番で処理してもらいたいのですが・・・
Deferred や then の扱い方が正しく理解できていないようです。
どなたかご指導くださるよう、お願い致します。
<!DOCTYPE HTML> <html lang ="ja"> <head> <meta charset ="utf-8"> <title>テスト</title> <script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script> <script type="text/javascript"> function func1(){ var number = $('#numberText').val(); var dfd1 = $.Deferred(); $.ajax({ type: "POST", url: "../code/backyard/SearchCategory.php", data: {"number":number}, dataType: 'text', }).done(function(response) { $('#categoryText').get(0).value = response; dfd1.resolve(); }).fail(function(response) { alert('error!!!'); }).always(function() { console.log("func1 complete"); console.log('ステータス１－１================' + dfd1.state()); }); console.log('ステータス１－２================' + dfd1.state()); return dfd1.promise(); } function func2(){ var category = $('#categoryText').val(); console.log("category=========" + category); var dfd2 = $.Deferred(); $.ajax({ type: "POST", url: "../code/backyard/SearchObject.php", data: {"category":category}, dataType: 'text', }).done(function(response) { $('#nameText').get(0).value = response; dfd2.resolve(); }).fail(function(response) { alert('error!!!'); }).always(function() { console.log("func2 complete"); console.log('ステータス２－１================' + dfd2.state()); }); console.log('ステータス２－２================' + dfd2.state()); return dfd2.promise(); } function goSearch(){ func1() .then(func2()); } </script> </head> <body> 番号<input type="text" id="numberText" /> <input type="button" value="送信" onclick="goSearch()" /> <br /> 種類<input type="text" id="categoryText" /><br /> 名前<input type="text" id="nameText" /> </div> </body>
【コンソールの表示内容】
ステータス１－２================pending
category=========
ステータス２－２================pending
func2 complete
ステータス２－１================resolved
func1 complete
ステータス１－１================resolved
回答3件
0
ベストアンサー
これだけで解消するかはわからないですが、.thenで待たせるためには、引数を関数にする必要があります。then(func2());のように書いてしまうと、「func2を実行してからその結果を.thenに渡す」という意味になり、意図したように動きません。
javascript
1 function goSearch(){ 2 func1().then(function(){ 3 func2(); 4 }); 5 }
投稿2018/05/28 05:46
総合スコア146550
0
ちょっと認識が違うのかもしれませんが、非同期でうけとったあとソートして表示すればいいのでは？
- hoge.php
PHP
1$(function(){ 2 var datas=[]; 3 $.when( 4 $.ajax({url:"fuga.php",data:{id:1}}).done(function(d1){datas.push({sort:1,data:d1});}), 5 $.ajax({url:"fuga.php",data:{id:2}}).done(function(d2){datas.push({sort:2,data:d2});}), 6 $.ajax({url:"fuga.php",data:{id:3}}).done(function(d3){datas.push({sort:3,data:d3});}) 7 ).done(function(){ 8 datas.sort(function(x,y){ 9 return x.sort>y.sort?1:-1; 10 }).forEach(function(x){ 11 console.log(x.data); 12 }); 13 }); 14});
- fuga.php
PHP
1<?PHP 2$id=filter_input(INPUT_GET,"id"); 3if($id==1) sleep(2); 4if($id==3) sleep(1); 5print "data".$id; 6?>
投稿2018/05/28 07:40
総合スコア117678
>もう少しかみ砕いて
うーん、サンプルもつけているのでこれ以上無いと思うのですが
受け取る順番がわからないないなら、とりあえず全部受け取って
データが揃ってから想定した順番で表示すればいいということ
例で言えば、データは2→3→1の順番で受け取りますが、
予めソート順を１→2→3のように指定してあるので、表示もそのようになります。
ちなみにfunc1がおわってからfunc2を実行するのは直列処理なので
時間の無駄が発生するのでやめたほうがいいです
0
提示のコードだとfunc1とfunc2を分けている意味があまりないような…
func1の$.ajax().doneのコールバック内でfunc2の中身を実行すればいいのでは？
投稿2018/05/28 08:33
総合スコア3830
回答ありがとうございました。
確かにコールバック内に func2 の中身を書けば実現するのですが、ajax が入れ子になって
可読性が悪くなってしまうため、ajaxを外出しにしたかったのです。
また、外出しにすれば他からも使い回しできますので。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/05/28 22:06