js異步編程

之前分析過js的運(yùn)行機(jī)制,這里再介紹一下異步編程。

天生的異步操作,DOM的點(diǎn)擊事件,AJAX獲取數(shù)據(jù),計(jì)時(shí)器等。兩個(gè)函數(shù),fn1,fn2,fn2要依靠fn1的結(jié)果運(yùn)行,但是fn1耗時(shí)長,這時(shí)就要手動(dòng)實(shí)現(xiàn)異步編程。

1.回調(diào)函數(shù)

使用setTimeout把fn1的執(zhí)行變成異步操作,等fn1運(yùn)行完,再執(zhí)行fn2.

function fn1(callback){

??? //fn1的執(zhí)行語句

??? setTimeout(function(){

??????? callback()

??? },1000)

}

fn1(fn2)

這種方法的優(yōu)點(diǎn)是易于理解,但是耦合性太高。

2.es6提供的Promise對(duì)象

每個(gè)異步任務(wù)返回一個(gè)Promise對(duì)象。

function fn1(){

??? var def = $.Deferred();

?? setTimeout(function(){

?????? //fn1的執(zhí)行語句

?????? ded.resolve();

??? },1000)

??? return def.promise

}

fn1.then(fn2)

3.訂閱-發(fā)布模式(觀察者模式)

假設(shè)存在一個(gè)信息中心,一個(gè)任務(wù)完成后向信息中心發(fā)布一個(gè)信號(hào),而其他任務(wù)可以從信息中心訂閱這個(gè)信號(hào),從而知道自己什么時(shí)候執(zhí)行。

jQuery.subscribe('done', fn2)

function fn1(){

??? setTimeout(function(){

??????? //fn1的執(zhí)行代碼

??????? jQuery.publish('done')

??? },1000)

}

fn1運(yùn)行結(jié)束后,向信息中心發(fā)布信號(hào),而fn2由于先前訂閱了這個(gè)信號(hào),所以此時(shí)開始執(zhí)行。

4.時(shí)間監(jiān)聽

事件被觸發(fā)后,任務(wù)開始執(zhí)行。

fn1.on('done', fn2)

function fn1(){

??? setTimeout(function(){

? ? ? ? //fn1的執(zhí)行代碼

? ? ? ? fn1.trigger('done')

??? },1000)

}

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容