質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.45%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Q&A

解決済

1回答

1458閲覧

ループ中でのAjaxの実行

taro373

総合スコア189

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

0グッド

0クリップ

投稿2019/07/18 08:50

編集2019/07/19 00:21

Ajaxでcgiを呼び出し、DBを検索して結果を返していました。

var request = $.ajax({type: 'GET',datatype:"text", data:{idnum:wkkey}, url: "select.cgi", async: true }) request.done(function(reqdata) { /* Ajaxの結果処理   */ }

これで動作していましたが
この処理をループして複数回実行する必要が生じました。
wkKeyArry に [111,222]と入っている状況で以下のように書き換えました。

for (cntID = 0;cntID < wkKeyArry.length;cntID++){ wkkey = wkKeyArry[cntID] /* ここで上記の処理 */ var request = $.ajax({type: 'GET',datatype:"text", data:{idnum:wkkey}, url: "select.cgi", async: true }) } request.done(function(reqdata) { /* Ajaxの結果処理   */ }

しかし非同期処理では、ループの順番や結果が正しく処理されません。
async: falseと同期処理にしてしまうと、ブラウザから非推奨と
言われます。

この場合、ループの中でAjaxの通信を待たせることは不可能なのでしょうか。
別の処理を待たせるのであれば、success:に書く方法や$.whenを使う方法が
あるようですが、
同じ処理を繰り返したい場合は、どのように待たせればよいのでしょうか。

Ajaxで呼ばれる側に、ループの機能を持たせる方法も考えていますが、
呼び出し側にループを追加する方が修正量が少ないので、
できればjavascript側で対応したいと考えています。

補足します
Ajaxでの呼び出しは1つだけです。例として処理A,処理B,処理Cの順序を
制御するのであれば、ネット上で情報がありました。
同じ処理を繰り返す必要が生じました。
2回以上で想定できる回数は、現状は6回ですが、上限は規定できません。
一番簡単な方法は非同期を同期にするだけです。
ただこの方法をとるとブラウザに非推奨の警告メッセージが表示されるので
回避策をお聞きしました

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Lhankor_Mhy

2019/07/18 08:56

補足願います。 reqdata には何が入っている想定ですか?
taro373

2019/07/19 00:24

reqdataにはAjaxでの結果が返ってきます タブ区切りでデータを返しています
Lhankor_Mhy

2019/07/19 00:28

お聞きしたかったのは、どのループでのAjaxでの結果なのか、ということです。 idnum=222の時、と理解してよろしいですか? その場合、idnum=111の結果は捨てられますが、それでよろしいですか?
taro373

2019/07/19 00:37

ご指摘ありがとうございます そうなんです。dnum=111の結果は捨てられてしまい、困っていました。 wkKeyArry に[111,222]となっていたら、 111の結果と222の結果を順に受け取って、111の結果の下に222の結果を 結合した表にして出力用としています。 が、現状は222の結果しか受け取れていません
Lhankor_Mhy

2019/07/19 00:51

なるほど。 では、yambejpさんのご回答の「A→B→Cと順番に処理」でよかったのですね。 ご解決されて何よりです。
guest

回答1

0

ベストアンサー

やりたい処理によります

  • A→B→Cと順番に処理したいならpromiseをネストしていきます
  • A,B,Cを並行して動かして一番遅いのを待つならpromise.allで十分です
  • たんにA,B,Cをバラバラに動かしてバラバラに処理するなら普通にfor文でまわすだけです

sample

  • ajax.php

とりあえずsというパラメータでsleepする秒を渡してその値を表示するモノを用意

PHP

1<?PHP 2$sleep=filter_input(INPUT_GET,'s'); 3sleep($sleep); 4print $sleep; 5?>

※ajax.php?s=2とすると、2秒待って"2"と表示される

A→B→Cと順番に処理

2,3,1と渡すと、2秒後に"2"、その3秒後に"3"、その1秒後に"1"

javascript

1$(function(){ 2 (async()=>{ 3 for(var i of [2,3,1]){ 4 await $.ajax({ 5 url:"ajax.php", 6 data:{s:i}, 7 }).done(function(data){ 8 console.log(data); 9 }); 10 } 11 })(); 12});

A,B,Cを並行して動かして一番遅いのを待つ

2,3,1を渡すと、一番遅い3を待って2,3,1と表示される

javascript

1$(function(){ 2 var d=[]; 3 $.each([2,3,1],function(x){ 4 d[x]=$.Deferred(); 5 $.ajax({ 6 url:"ajax.php", 7 data:{s:$(this).get(0)}, 8 }).done(function(data){ 9 d[x].resolve(data); 10 }); 11 }); 12 $.when.apply(null,d).done(function(r1,r2,r3){ 13 console.log([r1,r2,r3]); 14 }); 15});

A,B,Cをバラバラに動かしてバラバラに処理するなら

2,3,1と渡すが、1,2,3と順次表示される

javascript

1$(function(){ 2 $.each([2,3,1],function(){ 3 $.ajax({ 4 url:"ajax.php", 5 data:{s:$(this).get(0)}, 6 }).done(function(data){ 7 console.log(data); 8 }); 9 }); 10});

投稿2019/07/18 09:07

編集2019/07/18 09:50
yambejp

総合スコア115057

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

taro373

2019/07/19 00:30

ありがとうございました。 やろうとしていたことは、 「A→B→Cと順番に処理」 の処理です。 この方法に変更します。 cgi側を変更することも考えましたが、かなりのレアケースに 修正量が多い方を修正するのは、と考えてお聞きしました。 ありがとうございました。
taro373

2019/07/19 03:02

A→B→Cと順番に処理 の場合に 下から2行目にある })(); の () がわかりませんでした。 ベストアンサーを選んだ後なのですが、コメントいただけると幸いです
yambejp

2019/07/19 03:09 編集

これは無名関数をasync状態で実行してます (async()=>{・・・})(); ということです ちゃんと名前をつけて処理するとこう const myFunc=async()=>{ for(var i of [2,3,1]){ await $.ajax({ url:"ajax.php", data:{s:i}, }).done(function(data){ console.log(data); }); } } $(function(){ myFunc(); });
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.45%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問