如何让jquery在循环中的每个ajax调用后立即追加输出 [英] How to get jquery to append output immediately after each ajax call in a loop
问题描述
我想附加到元素上并让它立即更新. console.log()可以按预期显示数据，但是append()在for循环完成之前不执行任何操作，然后立即将其全部写入.
I'd like to append to an element and have it update immediately. console.log() shows the data as expected but append() does nothing until the for loop has finished and then writes it all at once.
index.html:
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:
server.php:
<?php
sleep(1);
echo time()."<br />";
?>
直到for循环完成后，页面才呈现.它不应该至少在运行javascript之前首先呈现HTML吗?
The page doesn't even render until after the for loop is complete. Shouldn't it at least render the HTML first before running the javascript?
推荐答案
如果切换到async: true，则在添加数据时屏幕将能够更新.
If you switch to async: true, then the screen will be able to update as you append data.
$(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()，并且在超时期间屏幕会更新.
If you insist on using async: false (which is generally horrible), then you could put a short setTimeout() between each ajax call and the screen would update during the timeout.
也有一些黑客通过访问某些CSS属性可能"导致屏幕更新(不保证)，这些属性只能在HTML布局是最新的时才计算得出，这可能导致浏览器显示最新的变化.我之所以说可能"，是因为这不是规范，而是对某些浏览器中行为的观察.您可以在此处阅读有关此选项的更多信息.
There are also some hacks that "may" cause the screen to update (no guarantees) by accessing certain CSS properties that can only be calculated when the HTML layout is up-to-date which may causes the browser to display the latest changes. I say "may" because this is not by specification, only an observation of behavior in some browsers. You can read more about this option here.
在任何情况下，由于您已经在使用ajax调用，因此解决此问题的最佳方法是使用async: true并将您的循环结构更改为可用于异步ajax调用的结构(如我所展示的那样)在我的示例中).
In any case, since you're already using ajax calls, the best way to solve this here is to use async: true and change your loop construct to one that will work with the async ajax call (as I've shown in my example).
这篇关于如何让jquery在循环中的每个ajax调用后立即追加输出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
