<!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>
