鍍金池/ 問答/HTML/ 請教兩個(gè)關(guān)于deferred的疑問?

請教兩個(gè)關(guān)于deferred的疑問?

比如說現(xiàn)在有這樣一個(gè)模型
有A,B,C,D四個(gè)模塊,分別執(zhí)行proccessing()這個(gè)函數(shù),每個(gè)模塊執(zhí)行效率不一樣,所以最終得到結(jié)果時(shí)間也不一樣。
代碼抽象出來的模型如下:

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(){}
}

第一種情況:如果A,B,C,D沒有先后時(shí)間關(guān)系,我只用等到四個(gè)模塊都執(zhí)行完畢后,最終得到結(jié)果即可,那么代碼層面上可以這樣寫:

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();
    }
}

這段代碼運(yùn)行起來是完全沒有問題的

(一)第一種情況:

這里只有四個(gè)模塊,如果這里有10個(gè)模塊,fun1這樣寫豈不是太冗余?

所以我就嘗試用數(shù)組eval一下,代碼如下:

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();
    }
}

這里就出現(xiàn)了第一個(gè)問題eval了一下后,只有ret1有返回值,其余的返回值全部是undefined,那么我想請教一下,如果有多個(gè)模塊,這里我該如何用循環(huán)來簡化代碼呢?

(二)第二種情況
如果A,B,C,D四個(gè)模塊,有嚴(yán)格的實(shí)行順序,必須為A->B->C->D
那么代碼如下:

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();
    }
}

這段代碼也沒有問題,但是這里就有第二個(gè)問題了,如果同樣有10個(gè)模塊,這樣嵌套寫法也非常的要人命啊,如何優(yōu)化這種寫法呢?

先謝過大家了~

回答
編輯回答
妖妖
  1. 不知道有apply嗎?
var arr = ["A","B","C","D"];
$.when.apply($, arr.map(v=>me.proccessing(v))).then(function(ret1,ret2,ret3,ret4){
    ......
}
  1. 不知道有callback嗎?
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);
});
2018年7月24日 07:01