<ul id="ya0kg"></ul>

JS-異步函數鏈式調用2（精簡版，推薦）

Heier 發布于2019-08-23 14:11 / 2491人閱讀

摘要：基數，倒計時進入倒計時進入倒計時進入倒計時進入倒計時進入倒計時倒計數結束執行完畢，結果為，準備進入。

基于《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 調用函數傳參

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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