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

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


        var dfd = $.Deferred();


        //第一步
        setTimeout(function(){
            dfd.resolve(10);
        },1000);

        
        //第二步等待第一步返回后执行
        dfd.then(function(data){
            console.log('Step1 Result:'+data);  //第一步的结果  10

            return setTimeout(function(){
                return data*data;  //  第二步的结果 100   这里如何将100返回到第三步能用
            },1000);

        })


        //第三步等待第二部返回的结果执行
        .then(function(data){
            console.log('Step2 Result:'+data);   //这里如何获取第二步的结果?
        })



你第2步需要返回一个 promise/deffered,我把你的代码改了下

var dfd = $.Deferred();


//第一步
setTimeout(function() {
    dfd.resolve(10);
}, 1000);


//第二步等待第一步返回后执行
dfd.then(function(data) {
    console.log('Step1 Result:' + data); //第一步的结果  10

    var d2 = $.Deferred();          // [viyi]
    setTimeout(function() {         // [viyi] 这里去掉了 Return
        d2.resolve(data * data);    // [viyi]
        // return data * data; //  第二步的结果 100   这里如何将100返回到第三步能用
    }, 1000);

    return d2.promise();            // [viyi]
})


//第三步等待第二部返回的结果执行
.then(function(data) {
    console.log('Step2 Result:' + data); //这里如何获取第二步的结果?
})

问题出在这里:return setTimeout(function() {...}),因为 setTimeout 的返回值是一个 timeoutID,而不是内部回调的返回值,所以你在第三步里接收到的 data 其实是那个 timeoutID,而内部回调返回的值则被淹没了

这问题的本质在于你第二步想要返回的不是一个直接值,而是一个异步调用,为了返回正确的结果,你可以把这个异步调用也用 Promise 封装一下,最后返回这个 promise 对象(也就是 jQuery 里面的 deferred 对象)即可。

// 第二步

dfd.then(function(data) {
    var deferred = $.Deferred();
    
    setTimeout(function(){
        deferred.resolve(data * data);
    }, 1000);
    
    return deferred;
})

return setTimeout(function(){
    return data+1;  //  第二步的结果 2   这里如何将data+1返回到第三步能用
},1000);

@changweihua
我将代码中的值稍微改了一下 你帮我看看 谢谢

【热门文章】
【热门文章】