如何让jquery在循环中的每个ajax调用之后立即附加输出
我想附加一个元素并立即更新。 console.log（）按预期显示数据，但append（）在for循环完成之前不执行任何操作，然后立即将其全部写入。
index.html的：
... Page loaded.
Data:
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()."
"; ?>
在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布局是最新的时才能计算出来，这可能会导致浏览器显示最新的更改。 我说“可能”，因为这不是规范，只是在一些浏览器中观察行为。 您可以在此处阅读有关此选项的更多信息
在任何情况下，因为你已经在使用ajax调用，所以在这里解决这个问题的最好方法是使用async: true并将你的循环结构更改为可以使用async ajax调用的结构（正如我在我的示例中所示） ）。