javascript非同步執行與操作流程控制實例詳解

1.Javascript語言的執行環境是」單一執行緒」(single thread):

優點：實作起來比較簡單，執行環境相對單純；

缺點：只要有一個任務耗時很長，後面的任務都必須排隊等著，會拖延整個程序的執行。常見的瀏覽器無回應（假死），往往是因為某一段Javascript程式碼長時間運行（例如死循環），導致整個頁面卡在這個地方，其他任務無法執行。

為了解決這個問題，Javascript語言將任務的執行模式分成兩種：同步（Synchronous）和非同步（Asynchronous）。

2.」非同步模式」程式設計的幾種方法：

（1）回呼函數：優點是簡單、容易理解和部署，缺點是不利於程式碼的閱讀和維護，各個部分之間高度耦合（Coupling），使得程式結構混亂、流程難以追蹤（尤其是回呼函數嵌套的情況），而且每個任務只能指定一個回呼函數。

（2）採用事件驅動模式（事件監聽）：優點是比較容易理解，可以綁定多個事件，每個事件可以指定多個回調函數，而且可以”去耦合“（Decoupling） ，有利於實現模組化。缺點是整個程式都要變成事件驅動型，運作流程會變得很不清晰。

（3）觀察者模式（發布\訂閱模式）：這種方法的性質與」事件監聽」類似，但是明顯優於後者。因為我們可以透過查看”訊息中心”，了解存在多少訊號、每個訊號有多少訂閱者，從而監控程式的運作。

3.非同步操作的流程控制。

（1）串列執行：寫一個流程控制函數，讓它來控制非同步任務，一個任務完成以後，再執行另一個。

var items = [ 1, 2, 3, 4, 5, 6 ];
var results = [];
function series(item) {
 if(item) {
  async( item, function(result) {
   results.push(result);
   return series(items.shift());
  });
 } else {
  return final(results);
 }
}
series(items.shift());

函數series就是串列函數，它會依序執行非同步任務，所有任務都完成後，才會執行final函數。 items數組保存每個非同步任務的參數，results數組保存每個非同步任務的運行結果。

（2）並行執行：所有非同步任務同時執行，等到全部完成以後，才執行final函數。

//forEach方法会同时发起6个异步任务，等到它们全部完成以后，才会执行final函数。
var items = [ 1, 2, 3, 4, 5, 6 ];
var results = [];

items.forEach(function(item) {
 async(item, function(result){
  results.push(result);
  if(results.length == items.length) {
   final(results);
  }
 })
});

並行執行的好處是效率較高，比起串列執行一次只能執行一個任務，較為節省時間。但問題在於如果並行的任務較多，很容易耗盡系統資源，拖慢運行速度。因此有了第三種流程控制方式。

（3）並行與串列的結合：設定一個門檻，每次最多只能並行執行n個非同步任務。這樣就避免了過度佔用系統資源。

//变量running记录当前正在运行的任务数，只要低于门槛值，就再启动一个新的任务
//如果等于0，就表示所有任务都执行完了，这时就执行final函数
//最多只能同时运行两个异步任务。
var items = [ 1, 2, 3, 4, 5, 6 ];
var results = [];
var running = 0;
var limit = 2;

function launcher() {
  while(running < limit && items.length > 0) {
    var item = items.shift();
    async(item, function(result) {
      results.push(result);
      running++;
      if(items.length > 0) {
        launcher();
      }
    });
    running--;
    if(running == 0) {
      final();
    }
  }
}

以上是javascript非同步執行與操作流程控制實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！