jquery的$.Deferred()多步骤调用问题

Question

vardfd=$.Deferred();//第一步setTimeout(function(){dfd.resolve(10);},1000);//第二步等待第一步返回后执行dfd.then(function(data){console.log('Step1Result:'+data);//第一步的结果10returnsetTimeout(function(){returndata*data;//第二步的结果100这里如何将100返回到第三步能用},1000);})//第三步等待第二部返回的结果执行.then(function(data){console.log('Step2Result:'+data);//这里如何获取第二步的结果?})

Answer 1

问题出在这里：returnsetTimeout(function(){...})，因为setTimeout的返回值是一个timeoutID，而不是内部回调的返回值，所以你在第三步里接收到的data其实是那个timeoutID，而内部回调返回的值则被淹没了
这问题的本质在于你第二步想要返回的不是一个直接值，而是一个异步调用，为了返回正确的结果，你可以把这个异步调用也用Promise封装一下，最后返回这个promise对象（也就是jQuery里面的deferred对象）即可。
//第二步
dfd.then(function(data){
vardeferred=$.Deferred();
setTimeout(function(){
deferred.resolve(data*data);
},1000);
returndeferred;
})
                            

Answer 2

你第2步需要返回一个promise/deffered，我把你的代码改了下
vardfd=$.Deferred();
//第一步
setTimeout(function(){
dfd.resolve(10);
},1000);
//第二步等待第一步返回后执行
dfd.then(function(data){
console.log('Step1Result:'+data);//第一步的结果10
vard2=$.Deferred();//[viyi]
setTimeout(function(){//[viyi]这里去掉了Return
d2.resolve(data*data);//[viyi]
//returndata*data;//第二步的结果100这里如何将100返回到第三步能用
},1000);
returnd2.promise();//[viyi]
})
//第三步等待第二部返回的结果执行
.then(function(data){
console.log('Step2Result:'+data);//这里如何获取第二步的结果?
})