jquery的deferred对象的done方法和then方法都能实现链式调用,但是他们的作用是有区别的,
then方法中如果你传递的方法有返回值,那么他会传递给下一个链式调用的方法。
而done方法与此相反,你传递的方法就算有返回值,done方法也不会把你的返回值传给下一个链式调用的方法的。即:
done返回当前的的deferred object,callback的返回值不会被传递;
then返回一个新的deferred object,callback的返回值会被传递(参考jquery的pipe属性)给新的callback.
var defer = jQuery.Deferred();
defer.done(function (a, b) { //2,3
console.log("a = " + a + "b = " + b); //a = 2b = 3
return a * b; //6
}).done(function (result) { //2
console.log("result = " + result); //result = 2
}).then(function (a, b) { //2,3
console.log("a = " + a + "b = " + b); //a = 2b = 3
return a * b; //6
}).done(function (result) { //6
console.log("result = " + result); //result = 6
}).then(function (a, b) { //6,undefined
console.log("a = " + a + "b = " + b); //a = 6b = undefined
return a * b; //NaN
}).done(function (result) { //NaN
console.log("result = " + result); //result = NaN
});
defer.resolve(2, 3);
//案例1:
/**
* run1
* 异步过程1
* 我是数据1
* run2
* 异步过程2
* 我是数据2
* 异步过程3
* 我是数据3
* */
function run1() {
console.log('run1'); //1
return new Promise((resolve, reject) => {
setTimeout(function () {
console.log('异步过程1');//2
resolve('我是数据1')
}, 1000)
})
}
function run2() {
console.log('run2'); //4
return new Promise((resolve, reject) => {
setTimeout(function () {
console.log('异步过程2'); //5
resolve('我是数据2')
}, 1000)
})
}
function run3() {
console.log('run3');
return new Promise((resolve, reject) => {
setTimeout(function () {
console.log('异步过程3');
resolve('我是数据3')
}, 1000)
})
}
run1().then(function (data) {
console.log(data) //3.我是数据1
return run2()
}).then(function (data) {
console.log(data) //6.我是数据2
return run3()
}).then(function (data) {
console.log(data)
})
// 案例2
new Promise(function (resolve, reject) {
setTimeout(() => resolve(1), 1000);
}).then(function (result) {
console.log(result); // 1
return new Promise((resolve, reject) => { // (*)
setTimeout(() => resolve(result * 2), 1000);
});
}).then(function (result) { // (**)
console.log(result); // 2
return new Promise((resolve, reject) => {
setTimeout(() => resolve(result * 2), 1000);
});
}).then(function (result) {
console.log(result); // 4
});
// 案例3
let run = async function () {
await run1();
await run2()
}
function run1() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve()
console.log('11')
}, 2000)
})
}
function run2() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve()
console.log('22')
}, 2000)
})
}
run()
案例参照:
https://blog.csdn.net/xianengneng/article/details/85001921?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.edu_weight&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.edu_weight