首頁 web前端 js教程 簡單介紹JS中的異步執行

簡單介紹JS中的異步執行

Jul 07, 2017 pm 02:57 PM
javascript 非同步 執行

下面小編就為大家帶來一篇淺談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中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前 By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前 By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章標籤

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

如何使用WebSocket和JavaScript實現線上語音辨識系統 如何使用WebSocket和JavaScript實現線上語音辨識系統 Dec 17, 2023 pm 02:54 PM

如何使用WebSocket和JavaScript實現線上語音辨識系統

WebSocket與JavaScript:實現即時監控系統的關鍵技術 WebSocket與JavaScript:實現即時監控系統的關鍵技術 Dec 17, 2023 pm 05:30 PM

WebSocket與JavaScript:實現即時監控系統的關鍵技術

如何利用JavaScript和WebSocket實現即時線上點餐系統 如何利用JavaScript和WebSocket實現即時線上點餐系統 Dec 17, 2023 pm 12:09 PM

如何利用JavaScript和WebSocket實現即時線上點餐系統

簡易JavaScript教學:取得HTTP狀態碼的方法 簡易JavaScript教學:取得HTTP狀態碼的方法 Jan 05, 2024 pm 06:08 PM

簡易JavaScript教學:取得HTTP狀態碼的方法

JavaScript與WebSocket:打造高效率的即時天氣預報系統 JavaScript與WebSocket:打造高效率的即時天氣預報系統 Dec 17, 2023 pm 05:13 PM

JavaScript與WebSocket:打造高效率的即時天氣預報系統

PHP非同步協程開發:加速資料快取與讀寫操作 PHP非同步協程開發:加速資料快取與讀寫操作 Dec 18, 2023 pm 01:09 PM

PHP非同步協程開發:加速資料快取與讀寫操作

Python asyncio 進階指南:從初學者到專家 Python asyncio 進階指南:從初學者到專家 Mar 04, 2024 am 09:43 AM

Python asyncio 進階指南:從初學者到專家

怎樣在瀏覽器中編寫PHP程式碼並保持程式碼不被執行? 怎樣在瀏覽器中編寫PHP程式碼並保持程式碼不被執行? Mar 10, 2024 pm 02:27 PM

怎樣在瀏覽器中編寫PHP程式碼並保持程式碼不被執行?

See all articles