關(guān)于異步function串行的實現(xiàn)

gnehc 發(fā)布于2019-08-19 18:26 / 557人閱讀

摘要：而這樣一層一層嵌套進(jìn)去的作用就是一個執(zhí)行完了，執(zhí)行下一個。函數(shù)的參數(shù)和函數(shù)一樣，只不過是執(zhí)行的順序與函數(shù)相反，是倒過來執(zhí)行的。第二個方案，也是他給我的思路。

這篇文章的起源是這樣一段代碼

這段代碼的作用很簡單，就是讓一系列的動畫，按順序執(zhí)行。而這樣一層一層嵌套進(jìn)去的作用就是一個執(zhí)行完了，執(zhí)行下一個。

為了解決這個問題我就想到了是不是可以把這些事件放到一個數(shù)組里，然后依次執(zhí)行呢？也就是說實現(xiàn)一個seq(tasks,finally)函數(shù)

/**
 * @param {function []} tasks - function array
 * @param {function} cb - 執(zhí)行完的回調(diào)
 */
 function seq(tasks, cb) {
 }

我的思路是每次執(zhí)行完一個function之后再執(zhí)行下一個函數(shù)，如果執(zhí)行到最后一個函數(shù)就執(zhí)行最后的cb即

function seq(tasks, cb) {
    (function runTask(i) {
        var task = tasks[i];
        task(function() {
            i++;
            if (i !== tasks.length) {
                runTask(i);
            } else {
                cb();
            }
        });
    })(0);
}

但是顯然這么實現(xiàn)并不優(yōu)雅(Zhuāng Bī)，那么有沒有更優(yōu)雅的方案呢？顯然是有的。我們可以使用ES5的reduceRight函數(shù)(MSDN文檔)
如果你并不知道這個函數(shù)的話，我們就要從和它差不多的reduce函數(shù)(MSDN文檔)說起了。
reduce函數(shù)接收兩個參數(shù)callback、initialValue

callback
執(zhí)行數(shù)組中每個值的函數(shù)，包含四個參數(shù)

previousValue
上一次調(diào)用回調(diào)返回的值，或者是提供的初始值（initialValue）

currentValue
數(shù)組中當(dāng)前被處理的元素

index
當(dāng)前元素在數(shù)組中的索引

array
調(diào)用 reduce 的數(shù)組

initialValue
作為第一次調(diào)用 callback 的第一個參數(shù)。

/**
@examples
**/
var array = [
    {
        id: 1,
        name: "小李"
    }, {
        id: 2,
        name: "小張"
    }, {
        id: 3,
        name: "小劉"
    }, {
        id: 4,
        name: "小王"
    }
]
var objMap = array.reduce(function(map,nowObj,index,array) {
    map[nowObj.id] = nowObj;
    return map;
},{});

很簡單的就把一個array，轉(zhuǎn)成了一個以id為key,obj為value的ObjMap有木有？就是這么簡單。
reduceRight函數(shù)的參數(shù)和reduce函數(shù)一樣，只不過是執(zhí)行的順序與reduce函數(shù)相反，是倒過來執(zhí)行的。這樣的話我們就可以把上面那個tasks轉(zhuǎn)換成類似最一開始那張圖一樣的結(jié)構(gòu)。

function seq2(tasks, cb) {
    tasks.reduceRight(function(cb, task) {
        return function() {
            return task(cb);
        };
    }, cb)();
}
//這段代碼的推導(dǎo)如下
//第一次執(zhí)行
function() {
    return task5(cb);
};
//第二次執(zhí)行
function() {
    return task4(function() {
        return task5(cb);
    });
}
//第三次執(zhí)行
function() {
    return task3(function() {
        return task4(function() {
            return task5(cb);
        });
    });
};
//第四次執(zhí)行
function() {
    return task2(function() {
        return task3(function() {
            return task4(function() {
                return task5(cb);
            });
        });
    })
};
//最后一次執(zhí)行
function() {
    return task1(function() {
        return task2(function() {
            return task3(function() {
                return task4(function() {
                    return task5(cb);
                });
            });
        });
    });
};

這樣就得到了一個跟上面最一開始那張圖一模一樣的一個function，然后最重要的是reduceRight面那個()，他就是啟動這個最終返回function的開關(guān)。
測試用例如下:

var tasks = [1, 2, 3, 4, 5];
tasks = tasks.map(function(i) {
    return function(cb) {
        setTimeout(function() {
            console.log(i);
            cb();
        }, Math.random() * 500 | 0);
    }
});
seq(tasks, function() {
    console.log("all Done");
});
seq2(tasks, function() {
    console.log("all Done");
});

這個問題是我公司的一位同事（老師）給我出的題目。第二個方案，也是他給我的思路。感謝我的這位老師，雖然在工作中我說的不多，但是在我內(nèi)心里，我對您的崇拜那是簡直了。哈哈。最后是github源代碼