js的異步操作

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

function f1(callback) {
  //...
callback();
}
function f2() {
//...
}
f1(f2);

回調(diào)函數(shù)的優(yōu)點(diǎn)是簡(jiǎn)單、容易理解和實(shí)現(xiàn),缺點(diǎn)是不利于代碼的閱讀和維護(hù),各個(gè)部分之間高度耦合(coupling),使得程序結(jié)構(gòu)混亂、流程難以追蹤(尤其是多個(gè)回調(diào)函數(shù)嵌套的情況),而且每個(gè)任務(wù)只能指定一個(gè)回調(diào)函數(shù)。

2. 事件監(jiān)聽

另一種思路是采用時(shí)間驅(qū)動(dòng)模式。 一部任務(wù)的執(zhí)行不取決于代碼的順序,而取決于某個(gè)事件是否發(fā)生

f1.on('done', f2);

當(dāng)f1發(fā)生done時(shí)間,就執(zhí)行f2.然后對(duì)f1進(jìn)行改寫

function f1() {
  setTimeout(fucntion (){
  //...
  f1.trigger('done');
},1000);
}

3. 發(fā)布/訂閱

事件完全可以理解成信號(hào),如果存在一個(gè)信號(hào)中心,某個(gè)任務(wù)執(zhí)行完成,就向信號(hào)中心發(fā)布一個(gè)信號(hào),其他人數(shù)可以向信號(hào)中心subscribe這個(gè)信號(hào)observer pattern
首先,f2向信號(hào)中心jQuery訂閱done信號(hào)

jQuery.subscribe('done',f2);

然后,f1進(jìn)行如下改寫

function f1() {
  //...
  setTimeout(function (){
  jQuery.publish('done');
}, 1000);
}

上面代碼中,jQuery.publish('done')的意思是,f1執(zhí)行完成后,向信號(hào)中心jQuery發(fā)布done信號(hào),從而引發(fā)f2的執(zhí)行。
f2完成執(zhí)行后,可以取消dingyue
jQuery.unsubscribe('done',f2);

5. 異步操作的流程控制

如果有多個(gè)異步操作,就存在一個(gè)流程控制的問題:如何確定異步操作執(zhí)行的順序,以及如何保證遵守這種順序。

function async(arg, callback){
  console.log('參數(shù)為 ' + arg +' , 1秒后返回結(jié)果');
  setTimeout(function () { callback(arg * 2); }, 1000);
}

5.1 串行執(zhí)行

var items = [1,2,3,4,5,6];
var results = [];
function async(arg, callback) {
console.log(arg);
setTimeout(function() {callback(arg*2);},1000);
}

function final(value){
console.log('done:',value);
}

function series(item) {
  if(item){
    async(item, function(result){
    results.push(result);
   return series(item.shift());
  });
  }else {
  return final(results[results.length -1]);
  }
}
series(item.shift());
?著作權(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)容

  • JavaScript只在一個(gè)線程上運(yùn)行。也就是說JavaScript同時(shí)只能執(zhí)行一個(gè)任務(wù),其他的任務(wù)都必須在后面排...
    wxyzcctn閱讀 2,809評(píng)論 0 3
  • 參考自:http://www.ruanyifeng.com/blog/2012/12/asynchronous%E...
    逸笛閱讀 81評(píng)論 0 0
  • 寫在前面:在語言級(jí)別上,Javascript是單線程的,然而很多情況下需要異步操作,因此異步編程對(duì)其尤為重要。 基...
    隔壁桌的鄭先生閱讀 252評(píng)論 0 1
  • 原文出處 你可能知道,Javascript語言的執(zhí)行環(huán)境是"單線程"(single thread)。 所謂"單線程...
    Yixi_Li閱讀 277評(píng)論 0 0
  • 這天,悟空正與師兄弟們于庭前交流法術(shù),忽見一少女走過,芳香盈來,沁人心脾,細(xì)一看,體態(tài)婀娜多姿,花容月貌,真...
    天使再次降臨閱讀 185評(píng)論 0 1

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