我想附加到一个元素并立即更新它。 console.log() 按预期显示数据，但append() 在 for 循环完成之前不执行任何操作，然后立即将其全部写入。
索引.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
}
});
}
});
服务器.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（这通常很可怕），那么你可以放一个短setTimeout()每次 ajax 调用之间，屏幕都会在超时期间更新。
还有一些黑客通过访问某些 CSS 属性“可能”导致屏幕更新（不保证），这些属性只能在 HTML 布局最新时计算，这可能导致浏览器显示最新的更改。我说“可能”是因为这不是规范，只是对某些浏览器中行为的观察。您可以阅读更多有关这个选项在这里.
无论如何，由于您已经在使用 ajax 调用，因此解决此问题的最佳方法是使用async: true并将循环构造更改为可与异步 ajax 调用配合使用的循环构造（如我在示例中所示）。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
