JS-异步函数链式调用2（精简版，推荐）

Heier 发布于2019-08-23 14:11 / 2460人阅读

摘要：基数，倒计时进入倒计时进入倒计时进入倒计时进入倒计时进入倒计时倒计数结束执行完毕，结果为，准备进入。

基于《JS-异步函数链式调用》使用起来不是很方便直观，对此做一次优化，更符合使用的精简版：

//源码
function simpleChainedFn(){
    var localParam = arguments; //当前入参
    var firstFnArguments; //首节点的入参(数组格式)
    var chainLength = localParam.length; //除掉首节点入参，所有链条长度

    // 入参数据校验...
    for(i=0;i
链条模板：
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

GPU云服务器云服务器 js 异步数据调用 js 异步函数递归 js匿名函数调用 js 调用函数传参

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100227.html

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

摘要：基数，倒计时进入倒计时进入倒计时进入倒计时进入倒计时进入倒计时倒计数结束执行完毕，结果为，准备进入。 2018-12-21 更新1、简化调用方式，更贴近普通函数的风格；精简版戳这里！ 2018-12-05 更新1、支持头节点入参；2、简化调用方式； //源码 function chainedFn(chain,firstFnArguments){ // 入参数据校验 ... ...

lidashuang 2019-08-21 16:39 评论0 收藏0
promise/deferred 模式原理分析和实现

摘要：三模式模式其实包含两部分和。六化在编码的时候，想要用进行异步操作流程控制，就要将当前的异步回调函数封装成。一、什么是promise/deferred 模式 promise/deferred 模式是，根据promise/A 或者它的增强修改版promise/A+ 规范实现的promise异步操作的一种实现方式。异步的广度使用使得回调，嵌套出现，但是一但出现深度的嵌套，就会让codi...

gclove 2019-08-21 11:48 评论0 收藏0
从零开始写一个 Promise 库

摘要：是什么在规范中，是一个类，它的构造函数接受一个函数。在这种情况下，是但处于状态。与一起使用关键字会暂停执行一个函数，直到等待的变成状态。此外，会一直等待调用直到下一个时序。原文：Write Your Own Node.js Promise Library from Scratch作者：code_barbarian Promise 已经是 JavaScript 中异步处理的基石，回调...

Binguner 2019-08-22 16:20 评论0 收藏0
javascript 回调函数整理

摘要：回调函数不是由该函数的实现方直接调用，而是在特定的事件或条件发生时由另外的一方调用的，用于对该事件或条件进行响应。若是使用回调函数进行处理，代码就可以继续进行其他任务，而无需空等。参考理解回调函数理解与使用中的回调函数这篇相当不错回调函数为什么写回调函数对于javascript中回调函数一直处于理解，但是应用不好的阶段，总是在别人家的代码中看到很巧妙的回调，那时候会有wow c...

xiaowugui666 2019-08-21 12:29 评论0 收藏0
Promise快餐

摘要：实例具有方法方法是定义在原型对象上的它的作用是为实例添加状态改变时的回调函数。一个请求的例子出错了方法是的别名，用于指定发生错误时的回调函数。那个率先改变的实例的返回值，就传递给的回调函数。 Promise 是异步编程的一种解决方案，其他的异步编程解决方案还有——回调函数、事件监听、发布订阅，以及ES6新增的Generator 。 http://www.ruanyifeng.com/b...

leone 2019-08-20 17:32 评论0 收藏0