Javascript 如何让jquery在循环中的每个ajax调用之后立即追加输出_Javascript_Jquery_Html_Ajax_Loops

Javascript 如何让jquery在循环中的每个ajax调用之后立即追加输出

javascript jquery html ajax loops

Javascript 如何让jquery在循环中的每个ajax调用之后立即追加输出,javascript,jquery,html,ajax,loops,Javascript,Jquery,Html,Ajax,Loops,我想附加到一个元素，并让它立即更新。console.log（）按预期显示数据，但append（）不执行任何操作，直到for循环完成，然后一次写入所有数据 index.html： ... <body> <p>Page loaded.</p> <p>Data:</p> <div id="Data"></div> </body> 。。。页面已加载数据： test.js： $(

我想附加到一个元素，并让它立即更新。console.log（）按预期显示数据，但append（）不执行任何操作，直到for循环完成，然后一次写入所有数据

index.html：

...
<body>
    <p>Page loaded.</p>
    <p>Data:</p>
    <div id="Data"></div>
</body>

。。。
页面已加载
数据：

test.js：

$(document).ready(function() {
    for( var i=0; i<5; i++ ) {
        $.ajax({
            async: false,
            url: 'server.php',
            success: function(r) {
                console.log(r); //this works
                $('#Data').append(r); //this happens all at once

            }
        });
    }
});

$（文档）.ready（函数（）{
对于（var i=0；i

在for循环完成之前，页面甚至不会呈现。在运行javascript之前，它是否至少应该首先呈现HTML？

如果切换到

async:true

，则屏幕将能够在添加数据时更新

$(document).ready(function() {
    var cntr = 0;
    // run 5 consecutive ajax calls
    // when the first one finishes, run the second one and so on
    function next() {
        $.ajax({
            async: true,
            url: 'server.php',
            success: function(r) {
                console.log(r); //this works
                $('#Data').append(r); //this happens all at once
                ++cntr;
                if (cntr < 5) {
                    next();
                }

            }
        });
    }
    next();
});

$（文档）.ready（函数（）{
var-cntr=0；
//连续运行5次ajax调用
//第一个完成后，运行第二个，依此类推
函数next（）{
$.ajax({
async:true，
url:'server.php'，
成功：功能（r）{
console.log（r）；//这很有效
$（'#Data'）.append（r）；//这会同时发生
++碳纳米管；
if（cntr<5）{
next（）；
}
}
});
}
next（）；
});

如果坚持使用

async:false

（这通常很糟糕），那么可以在每个ajax调用之间放置一个短的

setTimeout（）

，屏幕将在超时期间更新

还有一些黑客通过访问某些CSS属性“可能”导致屏幕更新（不保证），这些属性只能在HTML布局最新时计算，这可能导致浏览器显示最新的更改。我说“可能”因为这不是根据规范，只是对某些浏览器中行为的观察。您可以阅读更多关于

在任何情况下，由于您已经在使用ajax调用，因此解决此问题的最佳方法是使用

async:true

，并将您的循环构造更改为可用于异步ajax调用的循环构造（如我在示例中所示）.

为什么要使用

async:false

？谢谢！我想使用async:false，因为我实际上在做一些屏幕清理，不想猛击服务器。你能解释一下为什么循环需要这样，而不是简单的for循环吗？一个简单的

for

循环与

async:true

相结合将立即启动所有5个ajax调用然后所有5个结果都会出现。它将向服务器发送一系列请求。按照我的方式发送一个请求，等待响应，当它收到第一个响应时，发送第二个响应，依此类推，而不是猛击服务器。因此，您可以使用我的方式处理

async:true

，而不是猛击服务器。好的，这很有意义。谢谢您的支持你的答案让我抓狂！我仍然不清楚为什么for循环和async:false不能达到同样的效果。是jquery还是浏览器（在本例中是chrome）延迟了渲染？@david_nash-浏览器试图将所有DOM更改合并到一个布局和一个重绘中，因为这样做性能更好（重新布置和重新喷漆很慢）。因此，如果JS线程仍在运行，浏览器将在重新绘制屏幕之前等待该线程完成。当您使用

async:false

时，JS线程将持续运行且未完成，因此浏览器仍在等待您的上一次ajax调用完成。不必这样做，但这就是它的工作方式。

$(document).ready(function() {
    var cntr = 0;
    // run 5 consecutive ajax calls
    // when the first one finishes, run the second one and so on
    function next() {
        $.ajax({
            async: true,
            url: 'server.php',
            success: function(r) {
                console.log(r); //this works
                $('#Data').append(r); //this happens all at once
                ++cntr;
                if (cntr < 5) {
                    next();
                }

            }
        });
    }
    next();
});