我遍历一个数组,每个数组都运行ajax请求。我需要按顺序执行请求,因此我可以接听最后一个请求并成功运行一个函数。
目前我正在运行(简体):
$.each(array, function(i, item){ ajax_request(item.id, item.title, i); }) function ajax_request(id, title, i){ $.ajax({ async: false, url: 'url here', success: function(){ if(i == array.length-1){ // run function here as its the last item in array } } }) }
但是,使用async:false会使应用程序无响应/变慢。但是,如果没有async:false,有时其中一个请求会挂起并在最后发送的ajax请求返回后实际上返回。
我如何不使用async:false来实现呢?
您可以使用本地函数来运行ajax调用,并且在每个后续的成功处理程序中,可以启动下一个ajax调用。
function runAllAjax(array) { // initialize index counter var i = 0; function next() { var id = array[i].id; var title = array[i].title; $.ajax({ async: true, url: 'url here', success: function(){ ++i; if(i >= array.length) { // run function here as its the last item in array } else { // do the next ajax call next(); } } }); } // start the first one next(); }
在2016年使用使用promises的选项更新此答案。这是您依次运行请求的方式:
array.reduce(function(p, item) { return p.then(function() { // you can access item.id and item.title here return $.ajax({url: 'url here', ...}).then(function(result) { // process individual ajax result here }); }); }, Promise.resolve()).then(function() { // all requests are done here });
这是并行运行它们的方式,并返回所有结果:
var promises = []; array.forEach(function(item) { // you can access item.id and item.title here promises.push($.ajax({url: 'url here', ...}); }); Promise.all(promises).then(function(results) { // all ajax calls done here, results is an array of responses });