Question

我有关于jquery promise cascade的问题，我想简化它。我有一个级联功能（func1），它正在工作。我在执行下一个功能前2秒设置超时。我想复制并将其转换为数组reduce表单（func2），但它不像func1那样工作（超时不一样）。这是代码：

var Makes=[1,2,3,5,8];
$(document).ready(function(){
    //func1(); //WORKS
    func2();   //NOT WORKS LIKE func1

});

function func1(){
    timeout().then(function(){
       console.log("1");
       return timeout();
    }).then(function(){
       console.log("2");
       return timeout();
    }).then(function(){
       console.log("3");
       return timeout();
    }).then(function(){
       console.log("4");
       return timeout();
    }).then(function(){
       console.log("5");
       return timeout();
    });
}

function func2(){
    /*Makes.reduce(function(Models,Idx){
        return timeout().then(function(){
            console.log(Idx);
            return timeout();
            //return $.when(timeout());
        });
    },0);*/
    Makes.reduce(function(Models,Idx){
        return Models.then(function(){
            return timeout().then(function(){
                console.log(Idx);
                return timeout();
                //return $.when(timeout());
            });
        });
    },0);
}

function timeout(){
    var d = $.Deferred();
    setTimeout(function(){ 
        console.log("wait for 2 sec!");
        d.resolve(); 
    },2000);
    return d.promise();
}

Answer 1

你不应该在timeout().then回调中返回reduce，而是建立在前一次迭代中的承诺：Models.then。你应该给出一个初步的承诺，一个立即解决的承诺（$.when()）：

function func2(){
    Makes.reduce(function(Models, Idx) {
        return Models.then(function () {
            return timeout().then(function () {
                console.log(Idx);
            });
        });
    }, $.when()); // resolved starter promise
}

var Makes=[1,2,3,5,8];
$(document).ready(function(){
    func2(); 
});

function func2(){
    Makes.reduce(function(Models, Idx) {
        return Models.then(function () {
            return timeout().then(function () {
                console.log(Idx);
            });
        });
    }, $.when());
}

function timeout(){
    var d = $.Deferred();
    setTimeout(function(){ 
        console.log("wait for 2 sec!");
        d.resolve(); 
    },2000);
    return d.promise();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

或者，您可以使用“递归”类型的函数来实现异步循环：

function func2(){
    (function repeat(Idx) {
        if (Idx >= Makes.length) return;
        timeout().then(function () {
            console.log(Makes[Idx]);
            repeat(Idx+1);
        });
    }(0));
}

var Makes=[1,2,3,5,8];
$(document).ready(function(){
    func2(); 
});

function func2(){
    (function repeat(Idx) {
        if (Idx >= Makes.length) return;
        timeout().then(function () {
            console.log(Makes[Idx]);
            repeat(Idx+1);
        });
    }(0));
}

function timeout(){
    var d = $.Deferred();
    setTimeout(function(){ 
        console.log("wait for 2 sec!");
        d.resolve(); 
    },2000);
    return d.promise();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

jquery转换承诺级联

1 个答案: