[Javascript] ajax外で無限ループ中にajaxのcomplete処理を走らせたい

発生している問題

ajax完了時の処理（complete）も非同期の想定だったので、
以下の「試したこと」で最終的に無限ループ中にcomplete処理を実行したかったのですが
無限ループから抜けられなくなってしまいました。

ajax外の処理中(無限ループなど)にcomplete処理を実行する方法を教えていただきたいです。
また、ajaxとajax外の処理の同期非同期について記載されているサイトを探したのですが、
見つからず、それについての記事等ありましたら教えていただけるとありがたいです。

試したこと

ajax処理開始時に実行中フラグを立て、
ajax処理実行中にキー押下イベントで処理が走った場合、
実行中フラグが立っている場合は無限ループしてajax終了を待つ。
ajaxの処理が完了したら完了時の処理（complete）でフラグを解除し、
無限ループ中の処理はフラグが解除されたことにより後続処理を実行する。

という確認をしました。

想定していたこと

ajaxは通信～complete処理まで非同期であるという想定でした。
そのため、ajax外で処理を行っている場合でも、非同期にcomplete処理が実行されることで
complete処理内でajax処理終了フラグ等を使ってajax外の処理で終了を感知できる想定でした。

試したソースコード

Javascript
1let ajaxProcessing= false;
2function AjaxExecute() {
3      ajaxProcessing= true;    //★ここで実行中フラグを立てる
4      $.ajax({
5        type: 'get',
6        url: //APIのURL,
7        async : true,
8        success: function (data) {
9            //成功時処理
10        },
11        complete: function () {
12            ajaxProcessing= false;    //★ここで実行中フラグを解除
13        }
14      });
15
16$(document).on('keydown', function (e) {
17    while (ajaxProcessing) {    //★ajax実行中フラグが立っていたら待つ
18        //〇〇秒待つ
19    }
20});

行動規範の内容に同意します

回答2件

ベストアンサー

ajaxは通信～complete処理まで非同期であるという想定でした。

そのとおりです。

ただし、JavaScriptはシングルスレッドであるため、同期的な無限ループが継続している間は、（非同期なものも含めて）他の処理を一切行えない状態となります。

keydownから特定の変数に書き込んで、それをcompleteで見る、という形で書くのが素直かと思います。

投稿2023/06/09 04:34

maisumakun

総合スコア145184

maisumakun

2023/06/09 04:35

別解として、async-awaitなどを使って非同期の無限ループを行う方法も考えられます。

kentaro4673

2023/06/09 05:01

ご回答ありがとうございます！なるほどです！同期処理中には非同期処理も含めて処理ができないという点を知らず悩んでしまっていました。。念のための確認で恐縮なのですが、例えば無限ループではなく１万回ループなどにして、その間にajax処理が完了した場合ループを行っているイベント処理が終了した後にcompleteが走るという認識で間違っていないでしょうか。

kentaro4673

2023/06/09 05:02

>別解として、async-awaitなどを使って非同期の無限ループを行う方法も考えられます。別解ありがとうございます！確かに両方とも非同期にする方式ならフラグの変化を感知できますね。ありがとうございます！

maisumakun

2023/06/09 05:04

> 例えば無限ループではなく１万回ループなどにして、その間にajax処理が完了した場合ループを行っているイベント処理が終了した後にcompleteが走るという認識で間違っていないでしょうか。そのとおりです。ループ中に割り込むことはありません。

kentaro4673

2023/06/09 05:31

なるほどです。ありがとうございます！同期・非同期について分かりやすく勉強になりました。また解決方法も提示していただきとても助かりました。本当にありがとうございました！

行動規範の内容に同意します