jQuery.when() 方法詳解

 

/** 請注意 這個代碼是結合 阮老師 的博客來實現的.
 * 網址 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);