Question

我有一个使用各种http GET请求循环和收集信息的进程 - 通过Ajax以异步关闭方式触发，因为每个请求都取决于最后一个的结果。我用每个请求的结果更新一个表。行为是可变的，我不明白为什么。在Firefox中，表格会动态更新，而在Chrome中，它只会在循环结束时更新。但是，如果我进入调试中断，它会在Chrome中更新循环的每个回合。

我准备了这个剥离的例子 - 它展示了错误的行为。奇怪的是，它在Chrome或Firefox中不起作用 - 即它只在完成时显示整个表格，而不是在插入每一行时显示。

<button type="button" id="go">go!</button>

<div>
    <table id="results">
        <tbody id="resultbody">
        <tr>
            <th>Col1</th><th>Col2</th>
        </tr>
        </tbody>
    </table>

</div>

JavaScript是

$(document).ready(function() {  

$("#go").click(function(){
    for ( var i = 0; i < 10; i++) {
        $("#resultbody").append("<tr><td>"+i+" Hello</td>" +    "<td>World</td>");
        dosomething(1000);
    }
})

});

function dosomething(miliseconds) {
    var currentTime = new Date().getTime();
    while (currentTime + miliseconds >= new Date().getTime()) {
    }
}

我希望这会用每一行更新浏览器，然后等待1秒钟。事实上，它等待10秒然后显示整个表格。建议表示赞赏。

Answer 1

由于您的ajax调用是同步的，因此它们都作为同一浏览器事件的一部分进行处理。浏览器可以选择等待更新视口，直到它完成处理该事件。 Chrome会选择等待，除非您插入调试断点，此时它会更新视口。

您可以尝试使用setTimeout()将每个ajax调用推送到后续事件。这将使浏览器有机会更新调用之间的视口，但这些调用实际上并不是同步的。也就是说，它们会同时执行，而不是连续执行。

相反，您应该切换到异步ajax调用，但在第一次调用返回时启动下一个调用，依此类推。这样的事情。

$(document).ready(function () {
    function makeAjaxCall(i) {
        i = i || 0;
        $.ajax('your_url', {
            type: 'post',
            dataType: 'html',
            data: { index: i },
            success: function (html) {
                $('#resultbody').append(html);
                if (i < 9) {
                    makeAjaxCall(i + 1);
                }
            }
        });
    }

    $("#go").click(function () {
        makeAjaxCall();
    });
});

这是一个显示此示例的jsfiddle。

渲染JQuery DOM会发生变化

1 个答案: