ElementUIのLoadingを閉じた後、JavaScriptのアラート開くとLoadingが残ったままになる

ハマったこと

ElementUIのLoadingを閉じて、JavaScriptのalertを呼ぶと
Loadingが残ったままalertが表示された。
表示されているのはalertだけだと思っていたので、ハマりました。

原因

ElementUIのLoadingとJavaScriptのalertの動きが関係していました。

• ElementUIのLoadingを閉じる処理は300ms後に閉じる非同期処理
• JavaScriptのalertは開いてる間スクリプトの実行が停止する

Loadingが閉じるにはタイムラグがあり、その間にalertが起動するとLoadingの非同期処理も止まってしまい、結果としてLoading閉じられずが残ったまま、alertが表示されてしまっていました。。。

コードで表したイメージはこんな感じです。

// ローディング表示するよ
const loading = this.$loading({});

// ローディングを非表示にするよ
// でも300ms後に閉じるよ
loading.close();

// アラートを表示するよ
// アラート表示したら全てのスクリプト処理が止まるよ
alert('アラート消したら、ローディングが消える！');

対策

• ElementUIのLoadingComponetnを修正する(setTimeoutを0にすればうまくいくはず。。。）
• JavaScriptのalertを非同期にしてLoadingが閉じるのを待って開くようにする

実務では、仕様でJavaScriptのアラートを使うことになり（わけのわからない仕様）、
またElemetUIを修正すると影響範囲が大きいと理由で修正できなっかたので、
JavaScriptのアラートをLoadingが閉じてから開くような処理で対応しました。
以下、ご参考までに（きっともっといい方法があるはず。。。きっとある）

// 指定した時間待って、アラートを表示します
function delayAlert(msg, waitSec) {
  setTimeout(function() {
    alert(msg);
  }, waitSec);
}
// 使い方
delayAlert("時間差でアラート表示するよ", 300);

最後に

初めて記事を書いてみましたが、記事を書くのって難しいですね！
一つの記事書くのにかなり時間かかっちゃいました
記事の書き方や内容などで、ご指摘ありましたらガンガンお願いいたします