<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8" /> <title>UBR</title> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport"/> <meta content="telephone=no" name="format-detection"/> <script src="jquery-1.9.1.js"></script> </head> <body> <script> $(function() { /* common code */ function doneCallBack(value) { console.log(value); } function failCallBack(error) { console.log(error); } function failCallStatus(status) { console.log(status); } /* wait lists */ function waitA() { var def = $.Deferred(); setTimeout(function() { def.resolve("已完成A"); //def.reject("拒绝了A"); console.log("已完成A"); }, 2000); return def.promise(); } function waitB() { var def = $.Deferred(); setTimeout(function() { def.resolve("已完成B"); console.log("已完成B"); }, 2000); return def.promise(); } function waitC() { var def = $.Deferred(); setTimeout(function() { def.resolve("已完成C"); console.log("已完成C"); }, 2000); return def.promise(); } function waitD() { var def = $.Deferred(); setTimeout(function() { def.resolve("已完成D"); console.log("已完成D"); }, 2000); return def.promise(); } function waitE() { var def = $.Deferred(); setTimeout(function() { def.reject("已拒绝了E"); console.log("已完成E"); }, 2000); return def.promise(); } function waitF() { var def = $.Deferred(); setTimeout(function() { def.resolve("已完成F"); console.log("已完成F"); }, 2000); return def.promise(); } waitA() .then(waitB, failCallBack, failCallStatus) .then(waitC, failCallBack, failCallStatus) .then(waitD, failCallBack, failCallStatus) .then(waitE, failCallBack, failCallStatus) .then(waitF, failCallBack, failCallStatus); /** Promise/A+规范： 1、一个promise可能有三种状态： 等待（pending）、已完成（fulfilled）、已拒绝（rejected） 2、一个promise的状态只可能从“等待”转到“完成”态或者“拒绝”态， 不能逆向转换，同时“完成”态和“拒绝”态不能相互转换 3、promise必须实现then方法（可以说，then就是promise的核心）， 而且then必须返回一个promise，同一个promise的then可以调用多次， 并且回调的执行顺序跟它们被定义时的顺序一致 4、then方法接受两个参数，第一个参数是成功时的回调，在promise由“等待”态转换到“完成”态时调用，另一个是失败时的回调，在promise由“等待”态转换到“拒绝”态时调用。 同时，then可以接受另一个promise传入，也接受一个“类then”的对象或方法，即thenable对象。 * */ }) </script> </body> </html>
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8" /> <title>UBR</title> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport"/> <meta content="telephone=no" name="format-detection"/> <script src="jquery-1.9.1.js"></script> </head> <body> <script> $(function() { function asyncEvent() { var dfd = new jQuery.Deferred(); var t1 = Math.floor( 400 + Math.random() * 2000 ); var t2 = Math.floor( 400 + Math.random() * 2000 ); // Resolve after a random interval setTimeout(function() { console.log("成功的回调用时", t1); dfd.resolve( "hurray" ); }, t1 ); // Reject after a random interval setTimeout(function() { console.log("失败的回调用时", t2); dfd.reject( "sorry" ); }, t2 ); // Show a "working..." message every half-second setTimeout(function working() { if ( dfd.state() === "pending" ) { dfd.notify( "working... " ); setTimeout( working, 500 ); } }, 1 ); // Return the Promise so caller can't change the Deferred return dfd.promise(); } // Attach a done, fail, and progress handler for the asyncEvent $.when( asyncEvent() ).then( function( status ) { console.log( status + ", things are going well" ); }, function( status ) { console.log( status + ", you fail this time" ); }, function( status ) { $( "body" ).append( status ); } ); }) </script> </body> </html>