Question

我先解释一下这个问题，但我会尽量简短。

我设计了一个地图，使用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));
        });
    }
});

我遇到麻烦的部分是每次通过我希望计数会增加百分比的每个函数。例如1/100 .... 16/100 ... 25/100 ......等等。但是发生的事情是它只是暂停，直到数据属性被写入并直接跳到100％。

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

为什么上面的代码不会在每次传递中写入新计数？如果我出错了，请有人帮助我。我道歉这个问题有点罗嗦，并提前感谢。

Answer 1

JavaScript是单线程的，当你的代码忙于做一些计算时，UI线程没有机会更新。您可以考虑使用setTimeout或类似Underscore的defer功能来实现您的目标。 defer的文档如下：

_.defer（function，[* arguments]）

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

在循环中的每个传递中附加计数的DOM

1 个答案: