Deferred Object
一、$.Deferred()
Deferred 物件可以藉由 $.Deferred() 方法來建立。
二、deferred.resolve()
syntax：deferred.resolve( [args ] )
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <script src="https://code.jquery.com/jquery-3.1.0.js"></script> </head> <body> <script> function Show() { var $d = $.Deferred(); $d.resolve({ id: '111', name: 'Tim' }); return $d; } Show().done(function (arg) { console.log(arg.name); }); </script> </body> </html>
說明：
deferred.resolve() 方法可以把一個 deferred 物件狀態做成 resolved，
然後 deferred.done() 方法則是專門處理 resolved 狀態的 deferred 物件。
三、deferred.done()
syntax：deferred.done( doneCallbacks [, doneCallbacks ] )
範例如上。
四、deferred.reject()
syntax：deferred.reject( [args ] )
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <script src="https://code.jquery.com/jquery-3.1.0.js"></script> </head> <body> <script> function Show() { var $d = $.Deferred(); $d.reject({ id: '111', name: 'Tim' }); return $d; } Show().fail(function (arg) { console.log(arg.name); }); </script> </body> </html>
說明：
deferred.reject() 方法可以把一個 deferred 物件狀態做成 rejected，
然後 deferred.fail() 方法則是專門處理 rejected 狀態的 deferred 物件。
五、deferred.fail()
syntax：deferred.fail( failCallbacks [, failCallbacks ] )
範例如上。
六、deferred.catch()
syntax：deferred.catch( failCallback )
說明：
效果跟 deferred.fail() 一樣，只不過 deferred.fail() 參數可以接多個 failcallback function，
而 deferred.catch() 只能接一個 failcallback function 而已。
七、deferred.state()
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <script src="https://code.jquery.com/jquery-3.1.0.js"></script> </head> <body> <script> var $d = $.Deferred(); function Show() { setTimeout(function () { $d.resolve({ id: '111', name: 'Tim' }); }, 10000); return $d; } Show().done(function (arg) { console.log($d.state()); }); </script> </body> </html>
說明：
可以利用 deferred.state() 方法隨時去監視一 Deferred 物件的狀態。
八、deferred.notify()
syntax：deferred.notify( args )
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <script src="https://code.jquery.com/jquery-3.1.0.js"></script> </head> <body> <script> function Show() { var $d = $.Deferred(); var count = 0; var intervalId = setInterval(function () { $d.notify(count++); if (count > 3) clearInterval(intervalId); }, 500); return $d; } Show().progress(function (myCount) { console.log(myCount); }); </script> </body> </html>
說明：
當 Deferred 物件尚未設定為 resolved 或 rejected 狀態時，
這期間可以用 deferred.notify() 配合 deferred.progress() 方法去做某事。
九、deferred.progress()
syntax：deferred.progress( progressCallbacks [, progressCallbacks ] )
範例同上。
十、deferred.promise()
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <script src="https://code.jquery.com/jquery-3.1.0.js"></script> </head> <body> <script> function Show() { var $d = $.Deferred(); $d.resolve({ id: '111', name: 'Tim' }); return $d.promise(); } Show().done(function (arg) { console.log(arg.name); }); </script> </body> </html>
說明：
.promise() 方法是用來把一 deferred 物件做成 promise 物件，好處是
The deferred.promise() method allows an asynchronous function to prevent other code from interfering with the progress or status of its internal request.
十一、deferred.then()
syntax：deferred.then( doneCallback [, failCallback ] [, progressCallback ] )
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <script src="https://code.jquery.com/jquery-3.1.0.js"></script> </head> <body> <script> function Show() { var $d = $.Deferred(); $d.resolve({ id: '111', name: 'Tim' }); return $d; } Show().then( function (arg) { console.log("resolved " + arg.name); }, function (arg) { console.log("rejected " + arg.name); }, function (arg) { console.log("progress " + arg.name); } ); </script> </body> </html>
說明：
deferred.then() 方法可以同時放 doneCallback、failCallback、progressCallback handler。
十二、$.when()
syntax：$.when( deferreds )
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <script src="https://code.jquery.com/jquery-3.1.0.js"></script> </head> <body> <script> function Show1() { var $d = $.Deferred(); $d.resolve({}); return $d; } function Show2() { var $d = $.Deferred(); $d.reject({}); return $d; } $.when(Show1(), Show2()).done(() => console.log("done")).fail(() => console.log("fail")); </script> </body> </html>
說明：
$.when() 方法可以用來合併多個 Deferred 物件，只要任一 Deferred 物件的處理狀態是 rejected，就會進入 fail handle。
十三、deferred.always()
syntax：deferred.always( alwaysCallbacks [, alwaysCallbacks ] )
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <script src="https://code.jquery.com/jquery-3.1.0.js"></script> </head> <body> <script> function Show1() { var $d = $.Deferred(); $d.resolve({}); return $d; } function Show2() { var $d = $.Deferred(); $d.reject({}); return $d; } $.when(Show1(), Show2()) .done(() => console.log("done")) .fail(() => console.log("fail")) .always(() => console.log("always")); </script> </body> </html>
說明：
一個 Deferred 物件的結果不管是 resolved 或是 rejected 狀態，都會繼續執行 deferred.always() 方法所指定的 handler。
十四、deferred.notifyWith()
暫不說明。
十五、deferred.rejectWith()
暫不說明。
十六、deferred.resolveWith()
暫不說明。
十七、.promise()
暫不說明。