首頁 > web前端 > js教程 > 主體

簡單介紹JS中的異步執行

怪我咯
發布: 2017-07-07 14:57:52
原創
1043 人瀏覽過

下面小編就為大家帶來一篇淺談js的非同步執行。小編覺得蠻不錯的,現在就分享給大家,也給大家做個參考。一起跟著小編過來看看吧

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();
    }
  }
}
登入後複製

以上是簡單介紹JS中的異步執行的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!