jQuery.when() 方法詳解
阿新 • • 發佈:2019-01-12
/** 請注意 這個程式碼是結合 阮老師 的部落格來實現的. * 網址 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);