如何让jquery在循环中的每个ajax调用后立即追加输出
我想附加到一个元素并立即更新它。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（通常太糟糕了），则可以setTimeout()在每个ajax调用之间放置一小段时间，并且屏幕将在超时期间更新。
还有一些黑客通过访问某些CSS属性“可能”导致屏幕更新（不保证），这些属性只能在HTML布局为最新时才计算，这可能导致浏览器显示最新更改。我之所以说“可能”，是因为这不是规范，而是对某些浏览器中行为的观察。您可以在此处阅读有关此选项的更多信息。
无论如何，由于您已经在使用ajax调用，因此解决此问题的最佳方法是使用async: true循环结构并将其更改为可用于异步ajax调用的结构（如我的示例所示）。
-
问题内容： 我是AJAX的新手，我正在编写一个用户脚本，该脚本将处理页面上的一堆链接并为每个链接进行AJAX调用。 简单地说，我有一个包含链接列表的页面。我希望遍历链接并获取AJAX来处理每个链接页面的内容，并报告该页面是否包含指定内容。 我遇到的问题是用于遍历linkList的[i]的值始终为6，应该永远不会。我假设我需要传递一些数据，以便当.done最终触发时，它从AJAX首次触发时知道其[i
-
一小段python代码： 三个函数的结构类似 我的需求：f1 ,f2,f3这三个函数，无论哪个函数在运行中触发了except,那么当前循环立即中断，进入下一个循环。 请问，如何达到这个需求？
-
问题内容： 我注意到在.each（）循环中的jQuery中使用AJAX时遇到问题。执行脚本时，仅更新数据库中的第一条记录。 这是我的脚本： 以及save.php的内容： 我已经读过我可以选择使用同步而不是异步，但是我也读过，这不是一个好习惯。 那么，我实际上如何异步完成此工作并解决问题？ 问题答案： jQuery的$ .ajax（）返回jQuery XMLHttpRequest对象（“ jqXHR
-
问题内容： 事情是：我有一个页面，其中必须显示未确定数量的图像，这些页面是通过AJAX（在服务器端使用base64编码）一张一张地加载的。 问题是仅当获取所有图像时，才将图像（由renderImageData（）函数构造）附加到所有DIV中（一起）。我的意思是，直到循环结束，才有可能进行任何DOM操作。 由于可能会有大量的图像，因此我需要一张一张地加载和显示图像，因此我无法将它们堆叠起来，直到将它
-
我试过熊猫串连或类似，但似乎没有效果。你知道吗？谢了。
-
此外，我希望在打印输出时跳过零值行。 这是我的代码：