之前分析過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)
}