0

我将首先对此进行一些解释，但我会尽量保持简短和简单。

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

为什么上面的代码没有在每次传递时写入新的计数？请有人可以帮我解决我哪里出错了。我很抱歉这个问题有点罗嗦，在此先感谢。

4

1 回答 1

3

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

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

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

于 2013-01-31T15:11:55.243 回答