javascript - ループ内のすべてのパスにカウントの DOM を追加する

Question

最初にこれについて少し説明しますが、短く簡単にしようと思います。

私は ajax を使用してロード時に情報が追加されるマップを設計しました。for ループを使用して、ID が一致するすべての div に 6 つのデータ属性を追加します。完了するまでに約4〜8秒かかるため、ロード進行機能を追加したいと考えています。これが問題です。

これは、問題のコードの完全な部分です。下に問題がある部分を書いたので、必要に応じてスキップできます。

$.ajax({

    // Get information 
    type:'GET',
    url:'../../DataFile.php',
    data:"#roomtable table",
    success: function(data){

        //Total Count of Rooms
        totCount = $(".room").length;

        //Initalise Count
        count = 0;

        //For each room
        $('.room').each(function(){
            thisRoom = $(this);

            //Increase Count
            count++;

            //For each row in data table
            $($(data).find('tr')).each(function() {

                //If ID matched first cell
                if (thisRoom.attr('id') == $(this).find('td:nth(0)').html())
                {
                    .....
                    //Add data attributes from the other cells. 
                    .....
                }
            });

            //Write the current count as a percentage. 
            $('#count').text(Math.round(count/totCount*100));
        });
    }
});

私が問題を抱えている部分は、カウントがパーセンテージで増加することを望んでいた各関数を通過するたびにあります。例: 1/100.... 16/100... 25/100... など。しかし、何が起こっているかというと、データ属性が書き込まれるまで一時停止し、すぐに 100% にジャンプします。

count = 0;
$('.room').each(function(){
    count++;
    $('#count').text(Math.round(count/totCount*100));
});

上記のコードがパスごとに新しいカウントを書き込まないのはなぜですか? 私が間違っている場所で誰かが私を助けてください。質問が少し冗長で申し訳ありませんが、事前に感謝します。