Two questions about deferred?

for example, there is such a model
that there are four modules of A _ br > that execute the proccessing () function respectively, and the execution efficiency of each module is different, so the final time to get the result is also different. The model abstracted from the
code is as follows:

var test = {
    getRadom:function(min,max){
        var Range = max - min;
        var Rand = Math.random();
        var num = min + Math.round(Rand * Range);
        return num;
    },
    proccessing:function(param){
        var dfd = $.Deferred();
        var time = this.getRadom(1,4);
        window.setTimeout(function(){
            var tmpObj = {};
            tmpObj.param = param;
            tmpObj.time = time;
            dfd.resolve(tmpObj);
        },time * 1000);
        return dfd.promise();
    },
    init:function(){}
}

the first case: if there is no time relationship between the four modules, and I only need to wait until all four modules have been executed, I can finally get the result. Then at the code level, it can be written as follows:

var test = {
    getRadom:function(min,max){
        //
    },
    proccessing:function(param){
        //
    },
    fun1:function(){
        var me = this;
        $.when(me.proccessing("A"),me.proccessing("B"),me.proccessing("C"),me.proccessing("D")).then(function(ret1,ret2,ret3,ret4){
            console.log("param:" + ret1.param + "=====================" + "time:" + ret1.time);
            console.log("param:" + ret2.param + "=====================" + "time:" + ret2.time);
            console.log("param:" + ret3.param + "=====================" + "time:" + ret3.time);
            console.log("param:" + ret4.param + "=====================" + "time:" + ret4.time);
        });
    }
    init:function(){
        this.fun1();
    }
}

this code runs with no problem at all

(1) the first case:

there are only four modules here. If there are 10 modules here, wouldn"t it be too redundant for fun1 to write like this?

so I tried to use the array eval. The code is as follows:

var test = {
    getRadom:function(min,max){
        //
    },
    proccessing:function(param){
        //
    },
    fun2:function(){
        var arr = ["A","B","C","D"],str = "",me = this;
        for(var i in arr){
            str += "me.proccessing(\""+ arr[i] +"\"),"
        }
        str = str.substring(0,str.length-1);
        $.when(eval(str)).then(function(ret1,ret2,ret3,ret4){
            console.log("param:" + ret1.param + "=====================" + "time:" + ret1.time);
            console.log("param:" + ret2.param + "=====================" + "time:" + ret2.time);
            console.log("param:" + ret3.param + "=====================" + "time:" + ret3.time);
            console.log("param:" + ret4.param + "=====================" + "time:" + ret4.time);
        });
            
    },
    init:function(){
        this.fun2();
    }
}

here is the first problem. eval after a while, only ret1 has a return value, and the rest are all undefined,. So I would like to ask, if there are multiple modules, how can I use loops to simplify the code here?

(II) the second case
if the four modules of A-recorder B-recorder C-D have a strict order of implementation, they must be A-> B-> C-> D
then the code is as follows:

var test = {
    getRadom:function(min,max){
        //
    },
    proccessing:function(param){
        //
    },
    fun3:function(){
        var me = this;
        $.when(me.proccessing("A")).then(function(ret1){
            console.log("param:" + ret1.param + "=====================" + "time:" + ret1.time);
            $.when(me.proccessing("B")).then(function(ret2){
                console.log("param:" + ret2.param + "=====================" + "time:" + ret2.time);
                $.when(me.proccessing("C")).then(function(ret3){
                    console.log("param:" + ret3.param + "=====================" + "time:" + ret3.time);
                    $.when(me.proccessing("D")).then(function(ret4){
                        console.log("param:" + ret4.param + "=====================" + "time:" + ret4.time);
                    });
                });
            });
        });
    },
    init:function(){
        this.fun3();
    }
}

there is no problem with this code, but here is the second problem. If there are also 10 modules, the nesting writing method is also very fatal. How to optimize this writing method?

Thank you in advance ~

Mar.06,2021

  1. Don't you know that there is apply ?
var me = this;
var arr = ["A","B","C","D"];
$.when(me.proccessing(arr.shift())).then(function cb(ret){
    console.log("param:" + ret.param + "=====================" + "time:" + ret.time);
    if (arr.length > 0)
        $.when(me.proccessing(arr.shift())).then(cb);
});
Menu