$.when()方法
//这里场景是,需要循环调用接口,拿到所有数据,进行处理
利用$.when的方法
InitTeamList: function(gameId) {
var self = Schedules;
var goUrl = '';
var teamArr = [];
var arrTpm = [];
// 根据赛事拉取战队
for (var i in gameId) {
goUrl = "//test.com"+ gameId[i]+"_INFO.js";
$.ajaxSettings.async = true;
arrTpm.push($.getJSON(goUrl, function(data) {
if (data.status == 0 && data.msg.gameTeam != null) {
// teamArr.push(data.msg.gameTeam)
self.gameTeam.push(data.msg.gameTeam)
}
}))
}
$.when.apply($, arrTpm).then(function() {
self.InitVideoWarTeam()
});
}
$.when()接受多个deferred对象作为参数,当它们全部运行成功后,才调用resolved状态的回调函数,但只要其中有一个失败,就调用rejected状态的回调函数。它相当于将多个非同步操作,合并成一个。实质上,when方法为多个deferred对象,返回一个单一的promise对象
$.when(
$.ajax( "/main.php" ),
$.ajax( "/modules.php" ),
$.ajax( "/lists.php" )
).then(successFunc, failureFunc);
上面代码表示,要等到三个ajax操作都结束以后,才执行then方法指定的回调函数。
when方法里面要执行多少个操作,回调函数就有多少个参数,对应前面每一个操作的返回结果。
$.when(
$.ajax( "/main.php" ),
$.ajax( "/modules.php" ),
$.ajax( "/lists.php" )
).then(function (resp1, resp2, resp3){
console.log(resp1);
console.log(resp2);
console.log(resp3);
});
上面代码的回调函数有三个参数,resp1、resp2和resp3,依次对应前面三个ajax操作的返回结果。
如果when方法的参数不是deferred或promise对象,则直接作为回调函数的参数。
上面如果,返回值是一个变量,则直接拿取变量,并且是按照$.when里面的排序,按照顺序返回数据的
jquery的 defer解决地狱回调(异步请求,回调里面嵌套ajax请求的这种)
对于$.ajax请求来说,如果层级比较多,程序看起来会比较乱,而为了解决这种问题,才有了$when...done...fail...then的封装,它将$.ajax这嵌套结构转成了顺序平行的结果,向下面的$.ajax写法,看起来很乱
$.ajax({
url: "/home/GetProduct",
dataType: "JSON",
type: "GET",
success: function (data) {
$.ajax({
url: "/home/GetProduct",
dataType: "JSON",
type: "GET",
success: function (data) {
$.ajax({
url: "/home/GetProduct",
dataType: "JSON",
type: "GET",
success: function (data) {
}
}
}
而它实现的功能无非就是外层执行完成后,去执行内层的代码代码,看下面的$.when写法,就清晰多了
$.when($.ajax({
url: "/home/GetProduct",
dataType: "JSON",
type: "GET",
success: function (data) {
alert(JSON.stringify(data));
}
})).done(function (data) {
alert(data[0].Name);
}).done(function (data) {
alert(data[1].Name);
}).fail(function () {
alert("程序出现错误!");
}).then(function (data) {
alert("程序执行完成");
});