JavaScript隊列函數和異步執行

2017-02-21 1355 3 編輯:深圳網站建設 來源:互聯網

在Review別人的JavaScript代碼時曾看到過類似的隊列函數,不太理解,原來這個是為了保證函數按順序調用。讀了這篇文章之后,發現還可以用在異步執行等。

假設你有幾個函數fn1、fn2和fn3需要按順序調用,最簡單的方式當然是:

fn1();

fn2();

fn3();

但有時候這些函數是運行時一個個添加進來的,調用的時候并不知道都有些什么函數;這個時候可以預先定義一個數組,添加函數的時候把函數push 進去,需要的時候從數組中按順序一個個取出來,依次調用:

var stack = [];

// 執行其他操作,定義fn1

stack.push(fn1);

// 執行其他操作,定義fn2、fn3

stack.push(fn2, fn3);

// 調用的時候

stack.forEach(function(fn) { fn() });


這樣函數有沒名字也不重要,直接把匿名函數傳進去也可以。來測試一下:

var stack = [];

function fn1() {

    console.log('第一個調用');

}

stack.push(fn1);


function fn2() {

    console.log('第二個調用');

}

stack.push(fn2, function() { console.log('第三個調用') });

stack.forEach(function(fn) { fn() }); // 按順序輸出'第一個調用'、'第二個調用'、'第三個調用'


這個實現目前為止工作正常,但我們忽略了一個情況,就是異步函數的調用。如果你知道下面代碼會輸出1、3、2,那請繼續往下看:

console.log(1);

setTimeout(function() {

    console.log(2);

}, 0);

console.log(3);


假如stack 隊列中有某個函數是類似的異步函數,我們的實現就亂套了:

var stack = [];

function fn1() { console.log('第一個調用') };

stack.push(fn1);

function fn2() {

    setTimeout(function fn2Timeout() {

         console.log('第二個調用');

    }, 0);

}

stack.push(fn2, function() { console.log('第三個調用') });

stack.forEach(function(fn) { fn() }); // 輸出'第一個調用'、'第三個調用'、'第二個調用'


問題很明顯,fn2確實按順序調用了,但setTimeout里的function fn2Timeout() { console.log('第二個調用') }卻不是立即執行的(即使把timeout 設為0);fn2調用之后馬上返回,接著執行fn3,fn3執行完了然才真正輪到fn2Timeout。

怎么解決?我們分析下,這里的關鍵在于fn2Timeout,我們必須等到它真正執行完才調用fn3,理想情況下大概像這樣:

function fn2() {

    setTimeout(function() {

        fn2Timeout();

        fn3();

    }, 0);

}

但這樣做相當于把原來的fn2Timeout整個拿掉換成一個新函數,再把原來的fn2Timeout和fn3插進去。這種動態改掉原函數的寫法有個專門的名詞叫Monkey Patch。按我們程序員的口頭禪:“做肯定是能做”,但寫起來有點擰巴,而且容易把自己繞進去。有沒更好的做法?

我們退一步,不強求等fn2Timeout完全執行完才去執行fn3,而是在fn2Timeout函數體的最后一行去調用:

function fn2() {

    setTimeout(function fn2Timeout() {

        console.log('第二個調用');

        fn3();       // 注{1}

    }, 0);

}

這樣看起來好了點,不過定義fn2的時候都還沒有fn3,這fn3哪來的?

還有一個問題,fn2里既然要調用fn3,那我們就不能通過stack.forEach去調用fn3了,否則fn3會重復調用兩次。

我們不能把fn3寫死在fn2里。相反,我們只需要在fn2Timeout末尾里找出stack中fn2的下一個函數,再調用:

function fn2() {

    setTimeout(function fn2Timeout() {

        console.log('第二個調用');

        next();

    }, 0);

}

這個next函數負責找出stack 中的下一個函數并執行。我們現在來實現next:

var index = 0;

function next() {

    var fn = stack[index];

    index = index + 1; // 其實也可以用shift 把fn 拿出來

    if (typeof fn === 'function') fn();

}

next通過stack[index]去獲取stack中的函數,每調用next一次index會加1,從而達到取出下一個函數的目的。

next這樣使用:

var stack = [];

// 定義index 和next

function fn1() {

    console.log('第一個調用');

    next();  // stack 中每一個函數都必須調用`next`

};

stack.push(fn1);

function fn2() {

    setTimeout(function fn2Timeout() {

         console.log('第二個調用');

         next();  // 調用`next`

    }, 0);

}

stack.push(fn2, function() {

    console.log('第三個調用');

    next(); // 最后一個可以不調用,調用也沒用。

});

next(); // 調用next,最終按順序輸出'第一個調用'、'第二個調用'、'第三個調用'。

現在stack.forEach一行已經刪掉了,我們自行調用一次next,next會找出stack中的第一個函數fn1執行,fn1 里調用next,去找出下一個函數fn2并執行,fn2里再調用next,依此類推。

每一個函數里都必須調用next,如果某個函數里不寫,執行完該函數后程序就會直接結束,沒有任何機制繼續。

了解了函數隊列的這個實現后,你應該可以解決下面這道面試題了:

// 實現一個LazyMan,可以按照以下方式調用:

LazyMan(“Hank”)

/* 輸出: 

Hi! This is Hank!

*/


LazyMan(“Hank”).sleep(10).eat(“dinner”)輸出

/* 輸出: 

Hi! This is Hank!

// 等待10秒..

Wake up after 10

Eat dinner~

*/


LazyMan(“Hank”).eat(“dinner”).eat(“supper”)

/* 輸出: 

Hi This is Hank!

Eat dinner~

Eat supper~

*/


LazyMan(“Hank”).sleepFirst(5).eat(“supper”)

/* 等待5秒,輸出

Wake up after 5

Hi This is Hank!

Eat supper

*/


// 以此類推。


Node.js 中大名鼎鼎的connect框架正是這樣實現中間件隊列的。有興趣可以去看看它的源碼。


細心的你可能看出來,這個next暫時只能放在函數的末尾,如果放在中間,原來的問題還會出現:

function fn() {

    console.log(1);

    next();

    console.log(2); // next()如果調用了異步函數,console.log(2)就會先執行

}

redux 和koa 通過不同的實現,可以讓next放在函數中間,執行完后面的函數再折回來執行next下面的代碼,非常巧妙。

更多網站建設,app開發,請關注深正互聯

本站文章均為深正網站建設摘自權威資料,書籍,或網絡原創文章,如有版權糾紛或者違規問題,請即刻聯系我們刪除,我們歡迎您分享,引用和轉載,但謝絕直接搬磚和抄襲!感謝...
關注深正互聯
我們猜你喜歡
七星彩头尾 大V彩苹果 腾讯游戏pk网易游戏怎么赚钱 彩金捕鱼季最新下载 两万粉的微博如何赚钱 516棋牌游戏金蟾捕鱼下载 西瓜视频怎么赚钱快 怎么帮人做cad图 赚钱 旺旺龙江麻将下载 微信聊天能赚钱不 c35彩票游戏 平台交押金可以赚钱吗 六福彩票首页 能源再生公司怎么赚钱 大唐河北麻将玩法 小孩子课后辅导作业的班开赚钱不 菲律宾开奶茶店 很赚钱