[jQuery]同期処理でもローディングを表示させたい（async:false）

最後の投稿から約2年も更新が途絶えてたブログになります。今更感はありますが、自分自身のためにも残しておきたいと思い、久しぶりのプログラミング（jQuery）に関する投稿です。誰かもきっと悩んでるはず！

同期処理ではローディングが表示されない

次のソースは、まず、ローディングを表示させます。と思いきや表示されません。表示されればよいのですが、されないものはされません。いろいろなサイトやブログで言及されていますが、同期と非同期の動きの違いによるもので非同期ならばローディングが開始されますが、以下のような同期呼び出しだとローディングが表示されません。

// 同期処理でWebAPIを呼び出す関数
function async_false_func() {
    var url = './url/desu/';

    // ローディング（くるくる回ったりなんか動くやつ）
    // ↓　これは動かない。残念。
    $('.loading').fadeIn();

    // 処理時間のかかるAPIだと動きがわかりやすい
    $.ajax({
       type:"GET",
       url: url,
       async: false,
    }).done(function(res) {
       // OK
       // ローディングを非表示
       $('.loading').fadeOut(1000);       
    }).fail(function() {
       // NG
       // ずっと動いてろ！
    });
}

ポイントは、ajax のパラメータに async: false をつけて呼び出している点です。デフォルト値である async: true（非同期） であればローディングは動きます。ただし、async: false（同期）だと、ローディング処理が動きません。

また、async: false は非推奨だとか言われますが、同期で動かしたい場面はあったりします。そしてローディングも動かしたいのです。ではどうするか？

次のソースを見てください。とりあえず、次のようにすることでローディング処理を動作させることができました。

なお、async_false_func関数内のローディングの開始と終了処理は削除してあります。

    var promise = function (param) {
        return new Promise(function (resolve, reject) {
            // メインスレッドとは別スレッドで同期APIを呼び出す
            setTimeout(function () {
                async_false_func(); // 同期API呼び出し
                resolve(); // 完了        
            }, 0);
        });
    };
    // ローディング
    $('.loading').fadeIn(0);
    promise().then(function (success) {
        // ローディング終了
        $('.loading').fadeOut(1000);
        
        // その他の処理（あれば）
    });

とりあえず動いたからよし！