【技巧】js阵列函数all方法

前言

相信大家都使用过Promise.all()，那么是怎么来了。其实原理简单的很。通过回调来

必须姿势

我们想将成功后进行回调的函数。看下面的例子

function fn (flag,cb) {
	if(flag) {
		cb(flag);
	}
}
fn(true,function (a) {
	console.log(a)
});

多个回调制作all方法原理

通过函数进行回调，然后就标记一下。如果是多个函数，那么就多个函数进行回调就成了all函数了

function fn1 (cb) {
	setTimeout(function () {
		cb();
	},3000)
}
function fn2 (cb) {
	setTimeout(function () {
		cb();
	},1000)
}
function all (list) {
	var len = list.length;
	var num = 0;
	for(var i=0;i<len;i++) {
		list[i](function () {
			num++
			console.log(num);
		})
	}
}
all([fn1,fn2])

那么all函数返回，怎么把整个回调的进行数据整个返回了。

function fn1 (cb) {
	setTimeout(function () {
		cb();
	},3000)
}
function fn2 (cb) {
	setTimeout(function () {
		cb();
	},1000)
}
function all (list,cb) {
	var len = list.length;
	var num = 0;
	for(var i=0;i<len;i++) {
		list[i](function () {
			num++
			console.log(num);
			if(num == len) {
				cb('全部回调执行完成'); 
			}
		})
	}
	console.log(num);
}
all([fn1,fn2],function (str) {
	console.log(str) // 打印：回调
})

阵列回调

上面只是回调，那么能按顺序回调。

function fn1 (cb) {
	setTimeout(function () {
		cb('我是第一个回调得');
	},3000)
}
function fn2 (cb) {
	setTimeout(function () {
		cb('我是第二个回调得');
	},1000)
}
function fn3 (cb) {
	setTimeout(function () {
		cb('我是第三个回调得');
	},200)
}
function all (list,cb) {
	var len = list.length;
	var num = 0;
	var result = [];
	cbs();
	function cbs () {
		num++;
		list[num-1](function (data) {
			result.push(data)
			if(num==len) {
                cb(result)
                return;
            }
			cbs()
		})
	}
	
}
all([fn1,fn2,fn3],function (arr) {
	console.log(arr) // 打印：回调
})

大家从上面可以看到执行得完成后，可以看到缺陷，只能等待着下一个执行完了，才能执行下一个。有些时候无法满足我们，那么我们改下。

function fn1 (index,cb) {
	 // 注释的地方验证了，只有在最耗时间的函数内，完成才一起返回。
	// console.log('进入最长的时间',new Date().getSeconds())
	setTimeout(function () {
		cb(index,'我是第一个回调得');
		//console.log('结束时间',new Date().getSeconds())
	},3000)
}
function fn2 (index,cb) {
	setTimeout(function () {
		cb(index,'我是第二个回调得');
	},1000)
}
function fn3 (index,cb) {
	setTimeout(function () {
		cb(index,'我是第三个回调得');
	},200)
}
function all (list,cb) {
	var len = list.length;
	var num = 0;
	var result = [];
	for(var i=0;i<len;i++) {
		list[i](i,function (index,data) {
			result[index] = data;
			num++
			console.log(num);
			if(num == len) {
				cb(result); 
			}
		})
	}
	console.log(num);
}
all([fn1,fn2,fn3],function (arr) {
	console.log(arr) // 打印：回调
})

结语

大家都手动实战下，分析下还有什么方法。我这个写的方式有可能不是最优化的。很常见的地方，比如 axios.all 方法。大家要是有什么更好的，请在下面留言。