/** 请注意 这个代码是结合 阮老师 的博客来实现的.
* 网址 http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_deferred_object.html
* 如果有不懂的请看 阮老师 的网址
*/
// JQ 1.5 版本之前的 AJAX 方法
/**
* success : 这是一个成功的回调函数
* error : 这是一个失败的回调函数
*/
$.ajax({
type: "get",
url: "./test1.json",
data: "",
dataType: "json",
success: function(response) {
console.log(response);
},
error: function(err) {
console.log(err);
}
});
// JQ 1.5 版本之后的 AJAX 方法
/**
* done : 这是一个成功的回调函数
* fail : 这是一个失败的回调函数
*/
// (写法1)
$.ajax('./test1.json').done(function() {
console.log('成功了 ');
}).fail(function() {
console.log('失败了');
})
/**
* then : then 接受两个参数, 一个是成功的回调函数, 一个是失败的回调函数
* 如果成功了,会调用第一个回调函数, 如果失败了, 会调用第二个回调函数
*/
// (写法2)
$.ajax('./test1.json').then(function() {
console.log('成功了');
}, function() {
console.log('失败了');
})
/**
* ------------------------------------------------ $.when() ------------------------------------------------------
* (引入 $.when() )
* 提供一种方法来执行零个或多个( Thenable \ then \ Deferred ) 对象的回调函数,通常是表示异步事件
* 如果没有参数传递给 jQuery.when(),它会返回一个resolved状态的Promise。
* 切记 : 如果传参数 那么 他将永远返回的是 成功 的状态, 失败定义的回调函数, 永远不会被执行, 因为不会遭到拒绝
* 如果传参是 不是一个 Deferred 或 Promise 对象, 那么他将永远返回的是 成功 的状态, 失败定义的回调函数, 永远不会被执行, 因为不会遭到拒绝
*
* 上面说的两种 都不是 异步对象, 所以会直接返回 成功时的回调
* 如果说是成功的回调, 我们需要调用方法, done 和 fail 只是定义方法, 并没有调用, 不调用 并不会执行!!!
* resolve() : 这是调用成功的回调, 也就是说 定义的 done 的回调
* reject() : 这是调用失败的回调, 也就是说 定义的 fail 的回调
* 如果定义了 两个回调, 并且也执行了 resolve 和 reject, 只会执行最先执行的方法.
* 如果定义了 成功的 回调, 却执行了 reject 方法, 那么并不会执行, 因为你没有定义方法
*/
$.when().done(function() {
console.log('成功了'); /** 成功了 */
}).fail(function() {
console.log('失败了');
})
$.when({ testing: 123 }).done(
function(x) { alert(x.testing); } /* alerts "123" */
);
var dtd = $.Deferred()
$.when(dtd).done(function() {
console.log('1111');
}).fail(function() {
console.log('2222');
})
dtd.resolve() // 111
dtd.reject() // 不会执行,因为并没有定义失败的回调
/**
* $.when(参数1, 参数2, 参数3...)
* 此方法接受多个参数, 但是返回的结果却是不一样的, 但是无非还是两种状态, 一种成功时的状态, 一种失败时的状态
* 成功时的状态 : 必须所有的对象都返回成功, 才会返回成功的回调函数
* 失败时的状态 : 如果其中只要有一个返回失败, 都会返回失败的回调函数
* 如果定义函数的时候给了参数, 调用函数的时候没给参数, 那么值将会是 undefined
*/
/** d1, d2 时定义了两个 异步 对象 */
var d1 = $.Deferred();
var d2 = $.Deferred();
/** 调用 when 方法, 并且设置 ( 此处只是设置或者说定义, 并不是调用 ) 成功的回调*/
$.when().done(function(v1, v2) {
console.log(v1); // "Fish"
console.log(v2); // "Pizza"
});
/** 调用成功时的方法 */
// d1.resolve("Fish");
// d2.resolve("Pizza");
var d1 = $.Deferred();
var d2 = $.Deferred();
var d3 = $.Deferred();
var d4 = $.Deferred();
var d5 = $.Deferred();
/** 调用 when 方法, 并且设置 ( 此处只是设置或者说定义, 并不是调用 ) 成功的回调*/
$.when(d1, d2, d3, d4, d5).done(function(v1, v2, v3, v4, v5) {
console.log(v1); // "Fish"
console.log(v2); // "Pizza"
console.log(v3); // undefined
console.log(v4); // is Array [1, 2, 3]
console.log(v5); // is Object {a: "a"}
});
/** 调用成功时的方法 */
d1.resolve("Fish");
d2.resolve("Pizza");
d3.resolve();
d4.resolve(1, 2, 3);
d5.resolve({ a: "a" });
var d1 = $.Deferred();
var d2 = $.Deferred();
var d3 = $.Deferred();
$.when(d1, d2, d3).done(function(v1, v2, v3) {
console.log(v1); // v1 is undefined
console.log(v2); // v2 is "abc"
console.log(v3); // v3 is an array [ 1, 2, 3, 4, 5 ]
});
d1.resolve();
d2.resolve("abc");
d3.resolve(1, 2, 3, 4, 5);