jquery convert promise cascade

Question

I have a problem about jquery promise cascade and I want to simplify it. I have a cascade function (func1) that it's working. I set a timeout 2 seconds before executing the next function. I want to replicate and convert it to an array reduce form (func2) but it's not working like func1 (the timeout not same). Here is the code:

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

You should not return timeout().then in the reduce callback, but build on the promise you have from the previous iteration: Models.then. And you should give an initial promise to start with, one that resolves immediately ($.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>

Alternatively, you can use a "recursive" kind of function for implementing an asynchronous loop:

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>