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

How to get jquery to append output immediately after each ajax call in a loop

本文关键字：调用 ajax 输出 jquery 循环      更新时间：2023-09-26

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

索引.html：

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

测试.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
            }
        });
    }
});

服务器.php：

<?php 
    sleep(1);
    echo time()."<br />";
?>

在 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();
});

如果您坚持使用async: false（这通常是可怕的），那么您可以在每次 ajax 调用之间放置一个短暂的setTimeout()，屏幕将在超时期间更新。

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

无论如何，由于您已经在使用 ajax 调用，因此解决此问题的最佳方法是使用 async: true 并将循环构造更改为与异步 ajax 调用一起使用的循环构造（如我在示例中所示）。

相关文章：