[Javascript+jQuery] Ajax処理前にモーダルで「読み込み中」を表示させようとしても出てこない。（ブラウザの開発者ツールでステップで進めると出てくる）

javascriptで組んだ、複数のAjax処理関数を実行する直前に、モーダル画面を使って「読み込み中」を表示させようとしても、表示されないという現象に出くわしたため質問させていただきます。
よろしくお願いいたします。

※今回の質問ではPromiseなどは使わず、純粋なjavascript＋jquery環境での前提とさせていただきます。

前提・実現したいこと

既に単体レベルでは正常動作を確認できている、複数のAjax処理メソッドを実行する直前に
「読み込み中」とモーダル画面表示させる「処理X」と、Ajax処理が終わった場合に、
モーダル画面を消す「処理Z」で挟み撃ちした組み方をしました。

下記のソースで説明します。

JavaScript
1
2処理X(); //モーダル画面を表示させる
3Ajax処理A();
4Ajax処理B();
5Ajax処理C();
6処理Z(); //モーダル画面を消す

発生している問題・エラーメッセージ

今回の問題は「読み込み中」の画面が全く出ない（もしくは目視で確認できないほど一瞬）という現象です。

ブラウザの「F12開発者ツール」でコンソールを確認しましたが、エラーメッセージは全く出ませんでした。

ブラウザの「F12開発者ツール」でデバッグを解除した状態で動かすと、モーダル画面が全く表示されず、Ajax処理A～Cが処理されてしまうという現象に困っております。

試したこと

ブラウザの「F12開発者ツール」で１ステップずつ確認をしたところ、「読み込み中」のモーダル画面はきちんと出てAjax処理が終わったらモーダル画面が消えることを確認しました。

また、jQueryで$.ajax()を実行させるときのオプションではasync:falseを追加させています。
上記のソースで示したAjax処理のメソッドA～Cで共通させて設定しています。

javascript
1
2処理X(); //モーダル画面を表示させる
3Ajax処理A();
4Ajax処理B();
5Ajax処理C();
6処理Z(); //モーダル画面を消す
7
8//メソッドの定義
9function 処理X(){
10  $('.モーダルのクラス').remove();
11　$('body').append(パーツを組み込むHTML);
12}
13
14function 処理Z(){
15  $('.モーダルのクラス').remove();
16}
17
18function Ajax処理A(){
19　　$.ajax({
20　　  type: "POST",
21　　  url: "***.py",
22　　  data: {"parameter":"aaa"},
23     async: false
24　　}).done(function(data) {
25　　　 //HTML構築処理
26　　});
27}
28function Ajax処理B(){
29//URL以外はAjax処理Aと設定は同じ
30}
31function Ajax処理C(){
32//URL以外はAjax処理Aと設定は同じ
33}
34

補足情報（FW/ツールのバージョンなど）

OS：MasOS X (High Sierra)
ブラウザ：MacOS版　GoogleChrome
jQuery：3.2.1

m.ts10806

2018/08/22 21:59

提示内容だけでは現象が再現できません。最低限で結構ですので、再現できるコードを提示してください。また「Promiseなど」はどこまでを想定していますか？あまりに制限が多すぎると回答がつきにくくなるように思います。使ってはいけない理由があるのでしたらそちらも明記された方が良いでしょう。

yambejp

2018/08/23 00:15

A,B,Cは並行処理なのでしょうか？それともA→B→Cと前の処理を待つのでしょうか？

tamahimesama_xz

2018/08/23 01:07

失礼しました。A→B→Cの順番に処理させるというシナリオです。現状Promiseを使わなくても動作実績があるということで再利用した結果が今回の問題ということです。

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

回答1件

ベストアンサー

ajaxの処理を同期で処理するならpromiseでコントロールするのが妥当だと思います
（ajaxのオプションでasyncを利用するのは非推奨です）

ちなみにやるならこう

処理X();
$.when(Ajax処理A()).done(function(){
  $.when(Ajax処理B()).done(function(){
    $.when(Ajax処理C()).done(function(){
      処理Z();
    });
  });
});

function Ajax処理A(){
  var def=$.Deferred();
  $.ajax({
    type: "POST",
    url: "***.py",
    data: {"parameter":"aaa"},
　}).done(function(data) {
    //HTML構築処理
    def.resolve();
  });
  return def.promise();
}

投稿2018/08/23 02:21

編集2018/08/23 03:16

yambejp

総合スコア114769