串联执行N(未知)个函数
原创
第一种方式，直接遍历循环：
这种方式最简单，要串联执行多个函数，可以遍历循环执行，代码如下：
// 1
let a1 = function (next) {
console.log("a1");
}
let a2 = function (next) {
console.log("a2");
}
let a3 = function (next) {
console.log("a3");
}
let arr = [a1,a2,a3];
arr.forEach(e=>e());第二种方式,按照洋葱结构来构造代码结构，类似如图：
redux中间件
如何构造这样的代码呢，代码示例如下：
let a1 = function (next) {
console.log("a1");
next()
}
let a2 = function (next) {
console.log("a2");
next()
}
let a3 = function (next) {
console.log("a3");
next()
}
let arr = [a1, a2, a3];
let a = arr.reduce((a, b) => {
return () => b(a)
}, () => console.log("start"));
a();观察源码，我们在定义函数时为函数增加一个参数next，next是当前执行函数执行完后，下一个执行函数。
通过reduce函数的处理后，我们得到了函数a，函数a的函数函数体，我们可以利用数学中的函数代入得到结果:
function a () {
console.log("a3");
(
function (next) {
console.log("a2");
(
function (next) {
console.log("a1");
(
() => console.log("start")
)()
}
)()
}
)()
}
嗯 就是这个配方
上面的代码除了用reduce之外我们还可以使用循环来构造，代码如下：
let a1 = function (next) {
console.log("a1");
next()
}
let a2 = function (next) {
console.log("a2");
next()
}
let a3 = function (next) {
console.log("a3");
next()
}
let arr = [a1, a2, a3];
let a = () => console.log("start");
for (let i = 0; i < arr.length; i++) {
let next = a;
a = ()=>{
arr[i](next)
}
}
a();a函数最终得到的结果和上面是一样的，只是方法不一样而已。
除了循环和reduce，我们还可以使用递归，代码如下：
let a1 = function (next) {
console.log("a1");
next()
}
let a2 = function (next) {
console.log("a2");
next()
}
let a3 = function (next) {
console.log("a3");
next()
}
let arr = [a1, a2, a3];
var i = 0;
function next() {
var task = arr[i++]; // 取出函数数组里的下一个函数
if (!task) { // 如果函数不存在,return
return;
}
task(next); // 否则,执行下一个函数
}
next();递归调用原理也是类似构造一个回调函数，不过更趋向于流程化执行，更倾向于一边执行一边构造，而不是向上面两种方式，上面两种方式是先构造后执行。
阅读源码，我们定义了一个next函数和以一个全局变量i，i来标记执行到哪一个函数了，next调用标志着递归调用开始，每次执行i都会递增，然后从数组中取出中间件执行，中间件执行时传递进next，重复进行下一个调用轮回。
以上便是串联执行N(未知)个函数多种方式，应用最多的就是js技术栈中的中间件，redux的中间件，express的中间件都是用的以上的方法，多操作，多思考，微小改进每天进步一点点，希望对你有所帮助。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
腾讯云开发者
