我正在为一些大型查询编写一个脚本,为了避免 php 端超时,再加上为用户提供一些输入,我试图在 jquery 上完成大部分操作。
它的工作原理如下:首先,用户在选择上选择一条记录。当他单击该按钮时,我收到一个 ajax 调用,以从该记录中获取 json 格式的详细信息。
通过响应,我得到了一个循环,该循环对第一个调用的每个结果进行 ajax 调用。
如果我将 async 设置为 false,它可以工作,但浏览器会卡住,因为有多个 ajax 调用。那么有没有办法在关闭异步的情况下更新用户界面?
我的意思是,当我在循环内进行 ajax 调用时,我需要将 async 设置为关闭,这一事实对我来说没有任何意义。它可以同时进行多个调用,我对此很满意,但是为什么除非我将 async 设置为 false,否则它不会获取该循环内的当前索引?它继续使用第一个索引。
$("#button_copy").live('click', function(){
$('#button_copy').attr("disabled", true);
id = $('#select').val();
$.ajax({
type: "POST",
url: "query1.php",
dataType: 'json',
async:false,
cache: false,
data: 'id=' + id,
success: function( data ) {
var total1 = data['records'].length;
$("#console").append('Total query 1: ' + total1 + '<br />');
for (var i in data['records']) {
$.ajax({
type: "POST",
url: "query2.php",
dataType: 'json',
async:false,
cache: false,
data: 'id=' + data['records'][i].id,
success: function( data2 ) {
var total2 = data2['records2'].length;
$("#console").append('Total of query 2 from ' + data['records'][i].person + ': ' + total2 + '<br />');
},
error: function(data2) {
console.log(data2);
}
});
var percentprogress1 = (i / total1) * 10000;
$('#progressbar1').css('width',percentprogress1 + '%');
}
},
error: function(data) {
console.log(data);
}
});
});
最佳答案
您会遇到问题,因为您尝试在回调中使用 i
,但是当调用回调时,i
不再具有其原始值。您也不应该在数组上使用 for ... in
- 仅在对象上使用。
我建议不要使用任何类型的 for
循环,而是在前一个调用完成时触发每个连续的 AJAX 调用:
$.ajax(...).done(function(data) {
var all = data.records;
(function next() {
var record = all.shift();
if (record) {
$.post(...).done(next, function(res) {
// process inner result
// update UI, etc
...
});
}
})(); // invoke immediately
});
请注意,我在两个 AJAX 调用中使用了“延迟”语法,而不是传递 success:
处理程序。
在“伪递归”循环中,请注意我使用了 .done(next, ...)
,它允许循环并行启动下一个 AJAX 调用 处理当前调用的结果。
关于jquery - 如何执行多个 ajax 调用并在每次调用后更新 ui,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16914138/