基于《JS-异步函数链式挪用》应用起来不是很轻易直观,对此做一次优化,更相符应用的精简版:
//源码
function simpleChainedFn(){
var localParam = arguments; //当前入参
var firstFnArguments; //首节点的入参(数组花样)
var chainLength = localParam.length; //撤除首节点入参,一切链条长度
// 入参数据校验...
for(i=0;i<localParam.length;i++){
if(!localParam[i] || typeof localParam[i] !== "function"){
// 假如当前是却是第二个,则认为是首节点的入参;链条长度减1...
if(i === localParam.length - 1){
firstFnArguments = localParam[i];
chainLength -= 1;
}else{
console.log("【error】链条参数有误!");
return;
}
}
}
// 组合链条...
var firstFn = (function combinationFn(index){
var curFnIndex = index || 0; //当前函数索引
var callBack; //当前函数参数回调
// 假如存在下一条,则将下一条绑定为当前的回调...
if(curFnIndex + 1 < chainLength){
callBack = arguments.callee(curFnIndex + 1);
}
var curFn = localParam[curFnIndex];
if(curFn){
if(callBack){
curFn.callback = callBack;
}
return curFn;
}else{
return false;
}
})();
// 启动链条 ...
if(typeof firstFn === "function"){
var suctnParam = "";
if(firstFnArguments){
for(var i = 0 ; i < firstFnArguments.length; i ++)
{
suctnParam += "firstFnArguments[" + i + "]" + (i === firstFnArguments.length - 1 ? "" : ",");
}
}
eval("firstFn(" + suctnParam + ")");
}
}
// 获取回调函数
function getCallbackFn(){
return this.callback;
}
链条模板:
simpleChainedFn(函数1,函数2,....,函数n,[首节点入参1,首节点入参2,...首节点入参n]);
模板申明:
1、支撑多个函数自动扩大;
2、假如末了一个参数是数组,则作为首节点挪用时的入参;
3、首节点入参个数会跟着数组长度自动扩大;
函数模板:
function 函数名(入参1,入参2,...,入参n){
var callback = getCallbackFn.call(arguments.callee);
// TODO...
if(callback && typeof callback === "function"){
callback(入参1,入参2,...,入参n);
}
}
模板申明:
1、"var callback = getCallbackFn.call(arguments.callee);"只管在函数体前边;
现实应用
假定如今有3个须要同步实行的函数:fnA,fnB,fnC;
fnA的功用:将基数(入参1),乘上乘积(入参2),效果值和倒计时(入参3)传给fnB;
fnB的功用:进入倒计时,倒计时终了后,将入参乘上5,然后传给fnC;
fnC的功用:将参数打印出来;
// 组合链式关联 ...
simpleChainedFn(fnA,fnB,fnC,[2,10,5]);
// 将基数(入参1),乘上乘积(入参2),效果值和倒计时(入参3)传给fnB...
function fnA(base,multiplier,cDown){
var callback = getCallbackFn.call(arguments.callee);
console.log("【fnA】基数:" + base + ",乘积:" + multiplier + ",倒计时:" + cDown);
var num = base * multiplier ;
if(callback && typeof callback === "function"){
console.log("【fnA】实行终了,效果为:" + num + ",预备进入fnB。");
callback(num,cDown); // 等价于fnB
}
}
// 进入倒计时,倒计时终了后,将入参乘上5,然后传给fnC...
function fnB(base,cDown){
var callback = getCallbackFn.call(arguments.callee);
console.log("【fnB】基数:" + base + ",倒计时:" + cDown);
var countDown = cDown;
var tTout = setInterval(function(){
console.log("【fnB】进入倒计时 -> " + --countDown + "s");
if(countDown <= 0){
console.log("【fnB】倒计数终了");
countDown = -1;
clearTimeout(tTout);
var num = base * 5;
if(callback && typeof callback === "function"){
console.log("【fnB】实行终了,效果为:" + num + ",预备进入fnC。");
callback(num);// 等价于fnC
}
}
},1000);
}
// 将参数打印出来;
function fnC(tArg){
var callback = getCallbackFn.call(arguments.callee);
console.log("【fnC】计算效果为:" + tArg);
if(callback && typeof callback === "function"){
callback();
}
}
实行效果:
【FnA】基数:2,乘积:10,倒计时:5
【FnA】实行终了,效果为:20,预备进入fnB。
【fnB】基数:20,倒计时:5
【fnB】进入倒计时 -> 4s
【fnB】进入倒计时 -> 3s
【fnB】进入倒计时 -> 2s
【fnB】进入倒计时 -> 1s
【fnB】进入倒计时 -> 0s
【fnB】倒计数终了
【fnB】实行终了,效果为:100,预备进入fnC。
【fnC】计算效果为:100