Javascript 在循环中的每个过程上追加计数的DOM

我会先解释一下，但我会尽量简短

我设计了一个地图，它的信息是使用ajax加载添加的。使用for循环，它向ID匹配的每个div添加六个数据属性。我希望添加一个加载进度函数，因为它需要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));
        });
    }
});

我遇到的问题是，每次通过函数时，我都希望计数会增加百分比。e、 g 1/100。。。。16/100... 25/100... 等等。但实际情况是，它只是暂停，直到数据属性被写入，然后直接跳到100%

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

---

为什么上面的代码没有在每次通过时写入新的计数？请有人帮我找出哪里出了问题。很抱歉，这个问题有点罗嗦，提前谢谢你

JavaScript是单线程的，当您的代码忙于执行某些计算时，UI线程没有机会进行更新。您可以考虑使用<代码> SETTIMEOUT或类似下划线的函数来实现您的目标。

defer

的文档如下：

_.defer（函数，[*参数]）

---

延迟调用函数直到清除当前调用堆栈，类似于使用延迟为0的setTimeout。用于在不阻止UI线程更新的情况下执行大量昂贵的计算或HTML呈现。

JavaScript是单线程的，当代码忙于执行某些计算时，UI线程没有机会更新。您可以考虑使用<代码> SETTIMEOUT或类似下划线的函数来实现您的目标。

defer

的文档如下：

_.defer（函数，[*参数]）

---

延迟调用函数直到清除当前调用堆栈，类似于使用延迟为0的setTimeout。用于在不阻止UI线程更新的情况下执行大量昂贵的计算或HTML呈现。

作为一种加速机制，在循环中执行dom操作时，浏览器可能会决定不重新绘制屏幕。重新绘制屏幕/回流文档是一项极其昂贵的操作。如果希望计数显示为计数器，则必须异步编写代码。什么是

数据

，有多少

.room

？如果要使用适当的数据结构进行搜索，则不需要那么长的时间。@MarcB它似乎会暂停浏览器的其余部分，这就是原因。至少，将html表解析为本机JavaScript对象一次，然后使用它，而不是重复迭代DOM（并为此使用非常低效的jQuery）。作为一种加速机制，在循环中执行dom操作时，浏览器可能会决定不重新绘制屏幕。重新绘制屏幕/回流文档是一项极其昂贵的操作。如果希望计数显示为计数器，则必须异步编写代码。什么是

数据

，有多少

.room

？如果要使用适当的数据结构进行搜索，则不需要那么长的时间。@MarcB它似乎暂停了浏览器的其余部分，这就是原因。至少，将html表解析为本机JavaScript对象一次并使用它，而不是重复迭代DOM（并为此使用非常低效的jQuery）。