javascript-如何使jquery在循环中的每个ajax调用后立即追加输出

2019-11-22 15:35:08 阅读：173 来源： 互联网

标签：ajax loops html javascript jquery

我想附加到一个元素并立即更新它. 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

            }
        });
    }
});

server.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属性“可能”导致屏幕更新(不保证),这些属性只能在HTML布局为最新时才计算,这可能导致浏览器显示最新的更改.我之所以说“可能”,是因为这不是规范,而是对某些浏览器中行为的观察.您可以阅读有关this option here的更多信息.

无论如何,由于您已经在使用ajax调用,因此在此处解决此问题的最佳方法是使用async：true并将您的循环构造更改为可用于异步ajax调用的构造(如我的示例所示) ).

标签：ajax,loops,html,javascript,jquery
来源： https://codeday.me/bug/20191122/2060752.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript-如何使jquery在循环中的每个ajax调用后立即追加输出