javascriptが実行される順序について

Question

こちらのサイトを参考にしてぐるぐる回るローディング画像を表示したいのですがうまくいきません。

http://jquery.nj-clucker.com/now-loading/

これはうまくいきます

dispLoading("処理中..."); //ローディング画像を表示するユーザー定義関数

//ajax処理

removeLoading(); //ローディング画像を消すユーザー定義関数

上記の順番でプログラムを書くと

ローディング画像を表示

↓↓↓

ajax処理

↓↓↓

ローディング画像を非表示

こういう流れで表示と処理がされます。
これは問題ありません。

しかし次のような内容だと希望どおりにローディング画像が表示されません。

dispLoading("処理中...");

//時間がかかるjavascriptの処理（ajaxでない）。

removeLoading();

具体的な処理の内容は、長い文字列の操作です。

このプログラムを実行すると、ローディング画像は表示されずに、それ以外の処理が完了してしまいます。

ローディング画像が表示されないのはおかしいと思い、removeLoading() を無効にして実行しました。

こうした

dispLoading("処理中...");

//時間がかかるjavascriptの処理（ajaxでない）。

//removeLoading(); ← コメントアウト

すると、時間がかかるjavascriptの処理が完了した後、ローディング画像が表示されます。期待していたのと逆の表示順序です。

ローディング画像を表示

↓↓↓

時間がかかるjavascriptの処理（ajaxでない）

↓↓↓

ローディング画像を非表示

↑この順番でjavascriptの処理中にローディング画像を表示したいのですがどうすればいいでしょうか。なぜできないのでしょう？

よろしくお願いします。

Comments

[退会済みユーザー]

「時間がかかるjavascriptの処理（ajaxでない）」というのが、実は時間がかかってなくて瞬時に終了（もしくは Ajax と同様に非同期で、すぐ次の行に処理が移る）ということはないですか？

Answer 1

javascript実行中は画面の描画が反映されません。
dispLoadingを実行した後に、非同期で時間がかかる処理を呼び出す必要があります。

dispLoading("処理中...");

setTimeout(function() {

    //時間がかかるjavascriptの処理（ajaxでない）。

    removeLoading();
}, 0);

Answer 2

1つ1つの処理の完了を待ってから実行しているわけではないからです。

ajaxを使わない書き方で書いている処理は、上の行から順番に実行されていきますが、
タイミング的にはほぼ同時に実行されています（これを非同期処理といいます）

処理1、2、3とあったら、1が実行されると、1の処理完了を待つことなくすぐ2が実行されているということです。
なので、数秒かかる処理が間に挟まっていると、意図した処理にならないことがあります。

「上の処理を終えたら、下の処理を行う」という風にするには、promiseなどの同期処理を使う必要があります。

Ajaxのcompleteなどの関数はまさにそれで、先の処理の実行完了後に呼び出される関数なので、意図した順番通りに実行されます。