jquery ajax() 异步错误
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11246961/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery ajax() async false
提问by dontHaveName
i have problem..
我有问题..
for(a=1;a<10;a++){
$(".div").append("<div id="+a+"></div>")
$.ajax({
url: "file.php",
data: "a="+a,
type: "POST",
async: false,
success: function(data) {
$("#"+a).html(data);
}
});
}
$("div").click(function(){
alert("it works");
});
problem is:
is I didn't put there async: falsedata from file.phpare only in last div so with id 9
but now there is async: false- so data are in every div so that is good
问题是：我没有把file.php中的async: false数据放在最后一个 div 中，所以 id 为 9，但现在有- 所以数据在每个 div 中，这样很好async: false
but if i want click while it was loading by ajax it doesn't work (only after finished all ajax-es)
但是如果我想在它被 ajax 加载时点击它就不起作用（只有在完成所有 ajax-es 之后）
how resolve this problem? (maybe the false is that am I using ajax. I can use getJSON ect..)
如何解决这个问题？（也许错误的是我在使用 ajax。我可以使用 getJSON 等。）
thanks for helping
谢谢你的帮助
回答by Josh Mein
If you want the user to be able to use the interface while the ajax call is running, you should change your asyncto true. It has also been noted by James Allardice that in this scenario you need to use a javascript closure to retain the value of your original idfor when the ajax call is returned. For more information regarding javascript closures check out how-do-javascript-closures-work, a really good question found here on stackoverflow.
如果您希望用户能够在 ajax 调用运行时使用该界面，您应该将您async的true. James Allardice 还指出，在这种情况下，您需要使用 javascript 闭包在id返回 ajax 调用时保留原始值。有关 javascript 闭包的更多信息，请查看how-do-javascript-closures-work，这是在 stackoverflow 上找到的一个非常好的问题。
for(id = 1; id < 10; id++){
$(".div").append("<div id='" + id + "'></div>");
(function(id) {
$.ajax({
url: "file.php",
data: "a=" + id,
type: "POST",
async: true,
success: function(data) {
$("#"+ id).html(data);
}
});
}(id));
}
回答by TedRed
A good solution to this is to use a recursive function.
一个很好的解决方案是使用递归函数。
function appendDivs(limit, count) {
count = count || 1;
if (count <= limit) {
$(".div").append("<div id=" + count + "></div>");
$.ajax({
url: "file.php",
data: "a=" + count,
type: "POST",
async: true,
success: function(data) {
$("#" + count).html(data);
appendDivs(limit, count + 1);
},
error: function(e) {
alert('Error - ' + e.statusText);
appendDivs(limit, count + 1);
}
});
} else {
return false;
}
}
appendDivs(10);
