我想附加到一个元素并立即更新它. 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调用的构造(如我的示例所示) ).