我的AJAX调用内置于for循环中。它们需要按顺序排列(同步)。如何使用jQuery链接它们?
var array = ['One', 'Two', 'Three']; var arrayLength = array.length; for (var arrayCounter = 0; arrayCounter < arrayLength; arrayCounter++) { var id = array[arrayCounter]; getData(id); function getData(id) { $.ajax({ url: 'http://example.com/' + id, dataType: 'jsonp', success: function(d) { var response = d; console.log(d); }, error: function() { alert("ERROR"); } }); } }
解决方案使用for:
for
var array = ['One', 'Two', 'Three']; var id = array[0]; var data = getData(id); for (var i = 1; i < array.length; i++) { // Or only the last "i" will be used (function (i) { data = data.then(function() { return getData(array[i]); }); }(i)); } // Also, see how better the getData can be. function getData(id) { return $.ajax({ url: 'http://example.com/' + id, dataType: 'jsonp', }).done(function(d) { var response = d; console.log(d); }).fail(function() { alert('ERROR'); }); }
顺便说一句,如果您使用了一个适当的Promise库,例如bluebird,则将使用以下代码:
var array = ['One', 'Two', 'Three']; Promise.reduce(array, function(data, id) { return data.promise.then(function(result) { return { promise: getData(id), results: data.results.push(result) }; }); }, []).then(function(data) { console.log(data.results); // yay! }); function getData(id) { return Promise.cast($.ajax({ url: 'http://example.com/' + id, dataType: 'jsonp', }).done(function(d) { var response = d; console.log(d); }).fail(function() { alert('ERROR'); })); }
如您所见,读/写方式更容易。