JS-异步函数链式调用(更新：20181221)

最新推荐文章于 2024-08-18 15:26:38 发布
最新推荐文章于 2024-08-18 15:26:38 发布
阅读量590 收藏 1
点赞数
文章标签： javascript json ViewUI
原文链接：https://segmentfault.com/a/1190000011297044
版权

2018-12-21 更新
1、简化调用方式，更贴近普通函数的风格；
精简版戳这里！

2018-12-05 更新
1、支持头节点入参；
2、简化调用方式；

//源码
function chainedFn(chain,firstFnArguments){
    // 入参数据校验 ...
    for(var i=0;i<chain.length;i++){
        if(!chain[i]["fnName"] || (typeof chain[i]["fnName"]) != "function"){
            console.log("【error】链条参数有误！");
            return;
        }
    }

    // 组合链条 ...
    var firstFn = (function combinationFn(index){
        var curFnIndex = index || 0; //当前函数索引
        var curArg = chain[curFnIndex]["fnArg"] || ""; //当前函数参数
        var callBack = ""; //当前函数参数回调

        // 如果存在下一条，则将下一条绑定为当前的回调 ...
        if(curFnIndex + 1 <  chain.length){
            callBack = arguments.callee(curFnIndex + 1).fnCont;
        }

        var curFn = new chain[curFnIndex]["fnName"](callBack,curArg);
        if(curFn){
            return curFn;
        }else{
            return false;
        }

    })();

    // 启动链条 ...
    if(typeof firstFn.fnCont == "function"){
        var suctnParam = "";
        for(var i = 0 ; i < firstFnArguments.length; i ++)
        {
            suctnParam += "firstFnArguments[" + i + "]" + (i == firstFnArguments.length - 1 ? "" : ",");
        }
        eval("firstFn.fnCont(" + suctnParam + ")");

    }
}

链条模板：

chainedFn([
        {"fnName":方法名,"fnArg":实例化时的入参对象(非必传)},
        {"fnName":方法名,"fnArg":实例化时的入参对象(非必传)},
        {"fnName":方法名,"fnArg":实例化时的入参对象(非必传)}
    ],[头节点入参1,头节点入参2,头节点入参3...]
);

节点模板：

function 函数名(callback,链条上的【fnArg】(可选)){ //callback
    this.fnCont = function(...){ //如果是头节点，则入参对应chainedFn的第二个参数；否则等价于上一节点的【callback】
        //TODO...
        if(typeof callback == "function"){
            callback(...); // 等价于下一个节点的【fuCont】
        }
    }
}

函数示例：
假设现在有3个需要同步执行的函数：FnA，FnB，FnC；
FnA的功能：将基数(入参1)，乘上乘积(入参2)，结果值和倒计时(入参3)传给FnB；
FnB的功能：进入倒计时，倒计时结束后，将入参乘上5，然后传给fnC；
FnC的功能：将参数打印出来；

// 组合链式关系 ...
chainedFn([
    {"fnName":FnA}, //规定初始值
    {"fnName":FnB,"fnArg":"test"},//倒计时结束后，进行一些操作
    {"fnName":FnC}//展示处理结果
    ],[2,10,5]
);

// FnA的功能：将入参1乘上入参2，然后执行FnB，同时设置fnB的倒计时时间（入参3）...
function FnA(callback){
    this.fnCont = function(base,multiplier,cDown){
        console.log("【from FnA】基数：" + base + "，乘积：" + multiplier + "，倒计时：" + cDown);
        var num = base * multiplier ;
        if(typeof callback == "function"){
            console.log("【from FnA】执行完毕，结果为：" + num + "，准备进入FnB。");
            callback(num,cDown); // 等价于【FnB】的fuCont
        }
    }
}

// FnB的功能：倒计时结束后，将入参乘上5 ...
function FnB(callback,fnArg){
    this.fnCont = function(base,cDown){
        alert(fnArg);
        console.log("【from FnB】基数：" + base + "，倒计时：" + cDown);
        var countDown = cDown;
        var tTout = setInterval(function(){
            console.log("【from FnB】进入倒计时 -> " + --countDown + "s");
            if(countDown <= 0){
                console.log("【from FnB】倒计数结束");
                countDown = -1;
                clearTimeout(tTout);

                var num = base * 5;

                if(typeof callback == "function"){
                    console.log("【from FnB】执行完毕，结果为：" + num + "，准备进入FnC。");
                    callback(num);// 等价于【FnC】的fuCont
                }
            }
        },1000);

    }
};

// 将参数打印出来 ...
function FnC(callback){
    this.fnCont = function(tArg){
        console.log("【from FnC】计算结果为：" + tArg);
        if(typeof callback == "function"){
            callback();
        }
    }
};

执行结果：

【from FnA】基数：2，乘积：10，倒计时：5
【from FnA】执行完毕，结果为：20，准备进入FnB。
【from FnB】基数：20，倒计时：5
【from FnB】进入倒计时 -> 4s
【from FnB】进入倒计时 -> 3s
【from FnB】进入倒计时 -> 2s
【from FnB】进入倒计时 -> 1s
【from FnB】进入倒计时 -> 0s
【from FnB】倒计数结束
【from FnB】执行完毕，结果为：100，准备进入FnC。
【from FnC】计算结果为：100

此时突然新增一个需求：在FnA中指定一个值B，内容FnC输出值A不可大于B：如果A超过B则取B，否则取A：

FnA增加指定参数(maxNum)，并传出：

function FnA(callback){
    this.fnCont = function(base,multiplier,cDown,maxNum){
        console.log("【from FnA】基数：" + base + "，乘积：" + multiplier + "，倒计时：" + cDown);
        var num = base * multiplier ;
        if(typeof callback == "function"){
            console.log("【from FnA】执行完毕，结果为：" + num + "，准备进入下一节点");
            callback(num,cDown,maxNum); // 等价于【FnB】的fuCont
        }
    }
}

FnB原封不动将值传出：

function FnB(callback){
    this.fnCont = function(base,cDown,maxNum){
        console.log("【from FnB】基数：" + base + "，倒计时：" + cDown);
        var countDown = cDown;
        var tTout = setInterval(function(){
            console.log("from FnB：进入倒计时 -> " + --countDown + "s");
            if(countDown <= 0){
                console.log("【from FnB】倒计数结束");
                countDown = -1;
                clearTimeout(tTout);

                var num = base * 5;

                if(typeof callback == "function"){
                    console.log("【from FnB】执行完毕，结果为：" + num + "，准备进入下一节点");
                    callback(num,maxNum);// 等价于【FnC】的fuCont
                }
            }
        },1000);

    }
};

新增一个方法(FnD)，此函接受两个入参A，B。如果A小于B，则返回A，否则返回B：

function FnD(callback){
    this.fnCont = function(num,max){
        var tmpNum = num;
        var maxNum = max;

        if(tmpNum > maxNum){
            tmpNum = maxNum;
            console.log("【from FnD】计算结果为：" + tArg);
        }
        if(typeof callback == "function"){
            callback(tmpNum);
        }
    }
};

调整链式结构(指定最大值，增加FnD)：

// 组合链式关系 ...
chainedFn([
    {"fnName":FnA},//规定初始值
    {"fnName":FnB},//倒计时结束后，进行一些操作
    {"fnName":FnD},//最大值限制
    {"fnName":FnC} //展示处理结果
    ],[2,10,3,50]
);

输出结果：

【from FnA】基数：2，乘积：10，倒计时：3
【from FnA】执行完毕，结果为：20，准备进入下一节点
【from FnB】基数：20，倒计时：3
【from FnB】进入倒计时 -> 2s
【from FnB】进入倒计时 -> 1s
【from FnB】进入倒计时 -> 0s
【from FnB】倒计数结束
【from FnB】执行完毕，结果为：100，准备进入下一节点
【from FnD】值(100)超出限制，取限制值：50
【from FnC】计算结果为：50

聊一下背景
最近在开发项目的时候，因为需要数据同步处理，所以会遇到很多涉及到函数回调的地方。最多的达到了7个！不管是自己撸代码，还是维护代码，基本都是一项很烦心的事，特别要改原先其他同事写的逻辑，我宁愿重新写。

代码都是这样的：

a(xx,function(){
    b(xx,function(){
        c(xx,function(){
        .....
        });
    });
});

又或者这样的：

    function a(xx){
    //.....
    b();
    }
    function b(xx){
    //.....
    c();
    }
    
    ......

故，抽了点时间写了一个：以链式调用的形式用来处理需要回调的函数。

源码：

/**
*链式回调
**/
function chainedFn(chain){
    // 入参数据校验 ...
    for(var i=0;i<chain.length;i++){
        if(!chain[i]["fnName"] || (typeof chain[i]["fnName"]) != "function"){
            console.log("error：参数有误！");
            return;
        }
    }
    
    // 如果只有一条，则直接调用 ...
    if(chain.length < 2){
        (new chain[0]["fnName"](chain[0]["fnArg"]||"")).fnCont();
        return;
    }
    
    // 组合链条 ...
    var firstFn = (function combinationFn(index){
        var curFnIndex = index || 0; //当前函数索引
        var curArg = chain[curFnIndex]["fnArg"] || ""; //当前函数参数
        var callBack = ""; //当前函数参数回调
        
        // 如果存在下一条，则将下一条绑定为当前的回调 ...
        if(curFnIndex + 1 <  chain.length){
            callBack  = combinationFn(curFnIndex + 1).fnCont;
        }
        
        var curFn = new chain[curFnIndex]["fnName"](curArg,callBack);    
        if(curFn){
            return curFn;
        }else{
            return false;
        }
        
    })();
    
    // 启动链条 ...
    if(typeof firstFn.fnCont == "function"){
        firstFn.fnCont();
    }
}

链条模板：

chainedFn([
    {"fnName":方法名A,"fnArg":实例化时的入参对象(非必传)},
    {"fnName":方法名B,"fnArg":实例化时的入参对象(非必传)},
    {"fnName":方法名C,"fnArg":实例化时的入参对象(非必传)}
]);
   
说明：chainedFn的入参是JSON数组，【方法名名】需存在，且符合“对象模版”；【实例化时的入参】参数可无；

方法模版：

function **方法名**(**实例化参数**,callback){
    this.fnCont = function(tArg1,tArg2...){ //fnCont：函数主体(函数名不可变)，tArg：被回调的入参(链条上一节的入参)
        // 函数功能代码 ...
        
        
        if(typeof callback == "function"){
            callback(tArg1,tArg2...);//回调的入参(链条下一节的入参)
        }
    }
};
说明：【实例化参数】可为空；【fnCont】为函数主体，函数名不可修改；当前一节【fnCont】等于上一节的【callback】即： 
   A.callback() === B.fnCont()
   B.callback() === C.fnCont()

链式调用回调函数都做了什么？
1、依照入参中的先后顺序，动态组合了回调函数；
2、将当前的【callback】和下一个对象的【fnCont】进行映射绑定；

使用过程应注意什么？
1、根据实际情况调整回调顺序，或者增加方法；
2、每一节的callback即上下一节的fnCont；

函数示例：
假设现在有3个需要同步执行的函数：FnA，FnB，FnC；
FnA的功能：将入参乘上10，然后传给fnB，同时规定fnB的倒计时时间；
FnB的功能：进入倒计时，倒计时结束后，将入参乘上5，然后传给fnC；
FnC的功能：将参数打印出来；

// FnA的功能：将入参乘上10，然后执行FnB，同时设置fnB的倒计时时间（10s）...
function FnA(arg,callback){
    this.fnCont = function(){
        var num = arg * 10 ;
        if(typeof callback == "function"){
            callback(num,10); // 等价于【FnB】的fuCont
        }
    }
}

// FnB的功能：倒计时结束后，将入参乘上5，然后执行FnC ...
function FnB(arg,callback){
    this.fnCont = function(tArg,cDown){
        var num = tArg * 5;
        var countDown = cDown;
        var tTout = setInterval(function(){
            console.log("from FnB：进入倒计时 -> " + --countDown + "s");
            if(countDown <= 0){
                console.log("from FnB：倒计数结束");
                countDown = -1;
                clearTimeout(tTout);

                if(typeof callback == "function"){
                    console.log("from FnB：执行回调函数");
                    callback(num);// 等价于【FnC】的fuCont
                }
            }
        },1000);

    }
};

// 将参数打印出来 ...
function FnC(arg,callback){
    this.fnCont = function(tArg,awr){
        console.log("from FnC：入参的值是" + tArg);
        if(typeof callback == "function"){
            callback();
        }
    }
};


// 组合链式关系 ...
chainedFn([
       {"fnName":FnA,"fnArg":2}, //规定初始值
       {"fnName":FnB},//倒计时结束后，进行一些操作
       {"fnName":FnC},//展示处理结果
       ]);

执行结果：

from FnA：入参的值是 2
userCenter.js?v=undefined:63 from FnB：进入倒计时 -> 10s
userCenter.js?v=undefined:65 from FnB：进入倒计时 -> 9s
userCenter.js?v=undefined:65 from FnB：进入倒计时 -> 8s
userCenter.js?v=undefined:65 from FnB：进入倒计时 -> 7s
userCenter.js?v=undefined:65 from FnB：进入倒计时 -> 6s
userCenter.js?v=undefined:65 from FnB：进入倒计时 -> 5s
userCenter.js?v=undefined:65 from FnB：进入倒计时 -> 4s
userCenter.js?v=undefined:65 from FnB：进入倒计时 -> 3s
userCenter.js?v=undefined:65 from FnB：进入倒计时 -> 2s
userCenter.js?v=undefined:65 from FnB：进入倒计时 -> 1s
userCenter.js?v=undefined:65 from FnB：进入倒计时 -> 0s
userCenter.js?v=undefined:67 from FnB：倒计数结束
userCenter.js?v=undefined:82 from FnC：入参的值是100
weixin_34378045
关注
JavaScript中两种链式调用实现代码
12-13
一、方法体内返回对象实例自身(this) 代码如下: function ClassA(){ this.prop1 = null; this.prop2 = null; this.prop3 = null; } ClassA.prototype = { method1 : function(p1){ this.prop1 = p1; return this; }, method2 : function(p2){ this.prop2 = p2; return this; }, method3 : function(p3){ this.prop3 = p3; return this; } }
用原生js实现的链式调用函数
dianfenju4557的博客
10-12 271
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div> <input type="text" id="content"&g...
JS中链式调用的实现和应用
最新发布
沐爸的博客
08-18 1131
JavaScript链式调用是怎么实现的？哪些原生对象中可以使用链式调用？库和框架又是如何使用链式调用的？
JS-异步函数链式调用2（精简版，推荐）
weixin_34297704的博客
12-20 437
基于《JS-异步函数链式调用》使用起来不是很方便直观，对此做一次优化，更符合使用的精简版： //源码 function simpleChainedFn(){ var localParam = arguments; //当前入参 var firstFnArguments; //首节点的入参(数组格式) var cha...
四、JavaScript Promise[基础、异步链式操作]
黑日里不灭的light
11-04 590
上面的使用。
js函数的链式操作
12-04 718
读了TOM大叔的文章，受益匪浅。把链式操作函数贴一下，体验一下JS的魅力。其实我们经常会用到function(fn)这样的函数，把一个函数作为参数传到function里面，返回一个新的函数。 //通用的Chain operation函数 //核心就是var newArgs = frozenArgs.concat(args)这一句，把所有的参数都整到一个数组里面。简单来说就是(1)()(2,3,
SK37-WJS-App：天气JavaScript ：（参考：ModernJavaScriptLearning-Part05）-使用（ES6 +-提取-异步函数）
03-04
通过链式调用来处理异步操作，使得代码更易于理解和维护。 ```javascript const fetchWeather = () => { return new Promise((resolve, reject) => { // 异步操作，如API请求 if (/* 请求成功 */) { resolve...
goit-js-hw-11-promisification：https：ludmiladev.github.iogoit-js-hw-11-promisification
02-11
【描述】：“goit-js-hw-11-promisification”是一个学习项目，目的是将传统的回调函数风格的异步代码转化为基于Promise的现代JavaScript异步处理方式。在JavaScript中，Promise是处理异步操作的一种机制，它提供了...
goit-js-hw-11-promisification：JS-HOMEWORK-11
02-26
此外，还有常用的方法如`.then()`、`.catch()`、`.finally()`等，用于链式调用处理异步结果。 3. **Promisify函数**：这是作业的核心，你需要编写一个函数，将接受一个返回回调函数的函数作为参数，然后返回一个新...
javascript-978-1-7882-9174-3:使用函数式 JavaScript 实现和测试应用程序 [视频]
05-30
在JavaScript对象中，链式调用是一种常见的函数式编程技巧，它允许连续调用对象的方法，而不会中断上下文。例如，jQuery和ES6的Promise都支持这种风格。 11. 高阶组件（HOCs）在React中的应用： 在React框架中，...
javascript 支持链式调用的异步调用框架Async.Operation
10-29
在本框架中，链式调用主要体现在异步函数的连续执行上。每个操作步骤的结果作为下一个步骤的输入参数，从而形成了一条连续的操作链。 ##### 2.2 异步调用 异步调用是JavaScript中最常见的编程模式之一，它允许程序...
JS 实现函数链式调用
zhengzhengwang的专栏
08-30 954
let index = 0 let stack = [] function next(){ let fn = stack[index] index++ if(typeof fn === 'function') { fn() } } function T(name) { stack.push(function() { console.log('Hi! This is' + name) next() }) .
js：函数的链式调用（拼接字符串）
qq_44697303的博客
09-23 840
问题详情 完善一个函数 functionFunction，并实现链式调用：functionFunction(“a”,“b”)(“c”)(“d”),返回一个函数，函数转换为字符串类型是拼接的字符串:“a, b, c, d”; 答案 function functionFunction() { let string = ""; //高阶函数的内部变量 string = Array.prototype.slice.call(arguments,0).join(", "); let fn =
JS实现链式访问和回调函数
MAILLIBIN的专栏
03-06 944
要实现链式访问，关键是对象属性内嵌函数要返回一个对象，比如this当前对象，要链式访问的函数都作为该对象的属性绑定到其上，这样就可以通过点子运算符访问这个函数了。 要实现回调函数，关键是要将回调函数作为参数传进程序，程序内部需要运行该函数，如需传递参数，就在该函数内使用参数，这样回调的时候就可以取回单数。比如此处的回调函数是f，回调函数f内的参数为this，这样回调时function(da...
粗解js链式函数
Sissi的个人笔记
05-28 524
目录链式调用链式函数 链式调用 在codewars里做到链式函数的题目（codewars:js实现5kyu:A Chain adding function）之前，如果在面试的时候面试官让我实现add(1)(2)(3)(4)= 10，我应该是一点头绪都没有，然后羞愧的说一句：不好意思这个我不怎么会…最后‘完美’的挂掉面试，over。 在了解过程中我发现，其实链式调用我用的还是挺多的，比如在jQuery中经常会用到 $('#div').show().find('a').hide().end().css('col
javascript 链式函数运行
MajorMayer
07-26 1268
多个执行参函数本文不讲解其中原理，只是作为笔记，记录代码，其中特性请自行百度： 编写一个add函数 add(2)(3)(4) //输出9方法一 function add(x) { var sum = x; var tmp = function (y) { sum = sum + y; return tmp; }; tmp.to
Node.js中，q在链式调用和异步调用中起到的作用
lslxdx的专栏
03-30 1254
Node.js中，q可以方便地将回调大坑转换成链式调用，极大地增强了代码的可读性，下面一段代码演示了q在链式调用和异步调用中起到的作用。源码//app.js var Q = require('q');function func1(){ console.log('fun1 start'); var deferred = Q.defer(); deferred.resolve('func1
ES6的Promise链式异步编程方法
weixin_42738354的博客
10-28 417
一.什么是Promise Promise是异步编程的一种解决方案 那什么时候我们会来处理异步事件呢？ 一种很常见的场景就是网络请求 我们封装一个网络请求的函数，但网络请求往往不能立即拿到结果，因此我们会开启一个异步编程，它不会影响页面的继续加载 而我们往往会传入另外一个函数，在数据请求成功时，将数据通过此函数回调。 所以如果只是一个简单的网络请求，那么这种方案不会带来太多麻烦 但是当网络请求非常复杂时，就会出现回调地狱（多层回调），代码难看且不容易维护 而Promise可以以一种优雅的方式解决回调地狱的问
JavaScript链式调用
hsany330的专栏
03-20 6571
1、什么是链式调用？ 这个很容易理解，例如 $('text’).setStyle('color', 'red').show(); 一般的函数调用和链式调用的区别：链式调用完方法后，return this返回当前调用方法的对象。 首先，我们先来看看一般函数的调用方式 （1）先创建一个简单的类 //创建一个bird类 function Bird(name) { ...
chainit插件：实现JavaScript API的链式异步调用
Chainit 是一个库，它提供了一种将普通异步 API 转换成能够链式调用的异步 API 的方法，这大大提高了异步操作的可读性和组织性。 从标题可以提取的知识点包括： 1. 链式调用（Chaining）：这是一种编程技术，通过让...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值