談談你是如何理解js非同步編程的(js非同步編程的四種方法)

本文目錄一覽:

我對JS非同步執行機制的理解

說起JS的非同步執行機制,如果百度一下,你首先會發現阮一峰的寫過一篇關於非同步機制的文章( ),等你津津有味又一頭霧水的看完,然後繼續看百度的其他結果,然後會發現,阮一峰的這篇被另一個大牛朴靈給批判了

( )。

由此可見,關於非同步執行機制到底是怎麼回事,因為涉及到瀏覽器底層機制,所以不容易徹底了解清楚,就算是大牛阮一峰,也只是通過英文文獻來了解,而且一知半解。我的這篇文章只是試圖儘可能簡單的描述一下JS的非同步執行機制,坦白說,我現在並不能完全弄懂這個機制,所以也不能完全解釋清這個機制,所以,如果我寫的越嚴謹,就越容易出錯,我只能簡單但是較模糊的描述一下:

JS的運行環境是一個很複雜的環境,它裡面有非常多的複雜的名詞事物,用簡單又不嚴謹的說法來說,運行環境里至少有下面這些事物:

有一個國外的web app,專門用來講解非同步事件的門道 Loupe ,這個更接近真實情況。為什麼我不講解這個?因為更複雜了,我們並不打算研究瀏覽器的底層,不是么?

然後說一下任務隊列里的任務。所有任務可以分成兩種,一種是同步任務(synchronous),另一種是非同步任務(asynchronous)。同步任務指的是,靠主線程自己就可以執行完成的任務;非同步任務指的是,主線程執行開始之後,需要靠主線程之外的線程才能完成的任務。由主線程決定是否要動用其他線程。以下內容,不再提棧,只說主線程。

現在說重點:

非同步任務的執行機制是:

當主線程遇到一個非同步任務,比如一個ajax請求,當主線程執行到 xhr.send() 的時候,這個send命令是立即執行的, 並不會像一些人想像的,拖到所有同步任務的最後面。 然後主線程向http線程發送指令,要求http線程向伺服器發送請求。這裡強調一下http線程,顯然它不是主線程的一部分,因為它可以並發,如果你有100個ajax請求,每個都需要1秒鐘,是不是http線程要花100秒呢?並不是,它會並發100個請求,總共耗時大約1.01秒就完成了。

主線程向以http線程為代表的幾個線程發送指令之後,主線程就暫時不再管這個ajax任務了,而是去看任務隊列里的下一個任務。

http線程發送了請求之後接收反饋,收到之後,形成一個新的事件(可以叫做「我收到啦!」事件),然後插入到回調函數隊列中,因為回調函數隊列的優先順序很低,所以會排到總隊列的最後面,其結果就是:主線程把同步任務都完成了,才開始執行非同步事件的 回調 。 注意,並不是非同步任務在全體同步任務結束之後才開始,而是非同步任務的回調通常在全體同步任務結束之後才開始!非同步任務跟非同步任務的回調是兩回事!是兩個任務!一個鮮明的例子就是 setTimeout(fn, 1000) ,計時是從主線程遇到 setTimeout() 任務,然後分配給計時器線程,計時器線程開始幹活的時候就開始計時了!只不過要1秒之後 fn 才執行! setTimeout() 和 fn 是兩個任務! setTimeout() 是立即執行, fn 才是1秒之後執行。但是 setTimeout() 的執行,人眼是感受不到的,因為並沒有什麼地方有一個秒錶告訴你 setTimeout() 開始執行了;而fn的執行,人眼能感受到,所以人們會錯誤的以為fn才是非同步任務,其實fn並不是, fn 是個回調任務,往往 fn 是同步任務,比如 fn 可能是 console.log(123) ,這怎麼會是非同步任務。

所以,非同步機制是瀏覽器的兩個或以上常駐線程共同完成的,非同步請求是JS主線程和其他某個線程共同完成的,JS的執行線程發起非同步請求(這時瀏覽器會開一條新的HTTP請求線程來執行請求,這時JS自己的任務已完成,繼續執行線程隊列中剩下的其他任務),然後在未來的某一時刻”任務隊列”線程監視到之前的發起的HTTP請求已完成, “任務隊列”就會把完成事件插入到JS執行隊列的尾部等待JS處理 。

最後專門說說定時觸發(settimeout和setinterval)。

定時觸發是由瀏覽器的定時器線程執行的定時計數, 然後在定時時間到達之後,定時器線程把定時處理函數的執行請求插入到JS回調隊列的尾端。

這個1到底是100毫秒之後彈出,還是1000毫秒(或更多時間)後彈出呢?又或是1100毫秒之後彈出?

答案是,1000毫秒多一點點之後彈出。

原因:瀏覽器會先執行setTimeout,也就是開始計時,然後開始執行sometask,執行了1000毫秒,然後去回調隊列里看回調任務,alert(1);早就恭候了,因為定時100毫秒之後alert(1)就可以執行了。所以,等1000毫秒的任務完成,1就會立即彈出,所以答案是1000毫秒多一點點之後彈出。

所以用這兩個函數的時候,實際的執行時間是大於或等於指定時間的,不保證能準確定時的。

最後強調一下setInterval。比如我希望每100毫秒列印一個1。然後,又有極端情況,就是sometask耗時1000毫秒。你以為sometask結束之後會打出10個1么?並不會,只會打出1個1,因為setInterval第一次讀秒結束之後,回調隊列出現了一個alert(1),根據之前的理論,並不會執行。又過了100毫秒之後,計時器線程會去觀察回調隊列是不是已經有了alert(1),如果有,就不再往回調隊列里加alert(1),目的就是為了避免回調疊加執行。

總之,你需要記住,非同步任務就是主線程在任務隊列里看到了這個任務,看了一眼之後就然後安排別的線程幫忙,然後主線程就忙別的去了,別的線程幫忙完事之後,再在隊列末尾放一個新任務叫「幫忙完畢」,到此非同步任務本身就完事。主任務看到「幫忙完畢」任務之後,就去執行回調,回調執行完,這個非同步任務連同回調就全都完事。然後,如果並沒有回調。。。沒有就沒有唄。

js的同步、非同步是指什麼?怎麼回事?與線程有關嗎?

javascript 非同步表示async,指:代碼執行不按順序,『跳過』執行,待其他某些代碼執行完後,再來執行,稱為「非同步」。

javascript同步表示sync,指:代碼依次執行。

就是這麼回事

javascript所謂的「線程」,就是這樣一種概念

這種情況容易出現在 ajax 當中,因為ajax最可能,也最多用到async 或者 sync的概念屬性。

javascript同步和非同步的區別與實現方式

javascript語言是單線程機制。所謂單線程就是按次序執行,執行完一個任務再執行下一個。

對於瀏覽器來說,也就是無法在渲染頁面的同時執行代碼。

單線程機制的優點在於實現起來較為簡單,運行環境相對簡單。缺點在於,如果中間有任務需要響應時間過長,經常會導致

頁面載入錯誤或者瀏覽器無響應的狀況。這就是所謂的「同步模式」,程序執行順序與任務排列順序一致。對於瀏覽器來說,

同步模式效率較低,耗時長的任務都應該使用非同步模式;而在伺服器端,非同步模式則是唯一的模式,如果採用同步模式個人認為

伺服器很快就會出現12306在高峰期的表現。。。。

非同步模式的四種方式:

1.回調函數callback

所謂回調函數,就是將函數作為參數傳到需要回調的函數內部再執行。

典型的例子就是發送ajax請求。例如:

$.ajax({

async: false,

cache: false,

dataType: ‘json’,

url: “url”,

success: function(data) {

console.log(‘success’);

},

error: function(data) {

console.log(‘error’);

}

})

當發送ajax請求後,等待回應的過程不會堵塞程序運行,耗時的操作相當於延後執行。

回調函數的優點在於簡單,容易理解,但是可讀性較差,耦合度較高,不易於維護。

2.事件驅動

javascript可以稱之為是基於對象的語言,而基於對象的基本特徵就是事件驅動(Event-Driven)。

事件驅動,指的是由滑鼠和熱鍵的動作引發的一連串的程序操作。

例如,為頁面上的某個

$(‘#btn’).onclick(function(){

console.log(‘click button’);

});

綁定事件相當於在元素上進行監聽,是否執行註冊的事件代碼取決於事件是否發生。

優點在於容易理解,一個元素上可以綁定多個事件,有利於實現模塊化;但是缺點在於稱為事件驅動的模型後,流程不清晰。

3.發布/訂閱

發布訂閱模式(publish-subscribe pattern)又稱為觀察者模式(Observer pattern)。

該模式中,有兩類對象:觀察者和目標對象。目標對象中存在著一份觀察者的列表,當目標對象

的狀態發生改變時,主動通知觀察者,從而建立一種發布/訂閱的關係。

jquery有相關的插件,在這不是重點不細說了。。。。回頭寫個實現貼上來

4.promise模式

promise對象是CommonJS工作組提供的一種規範,用於非同步編程的統一介面。

promise對象通常實現一種then的方法,用來在註冊狀態發生改變時作為對應的回調函數。

promise模式在任何時刻都處於以下三種狀態之一:未完成(unfulfilled)、已完成(resolved)和拒絕(rejected)。以CommonJS

Promise/A

標準為例,promise對象上的then方法負責添加針對已完成和拒絕狀態下的處理函數。then方法會返回另一個promise對象,以便於形成promise管道,這種返回promise對象的方式能夠支持開發人員把非同步操作串聯起來,如then(resolvedHandler,

rejectedHandler); 。resolvedHandler

回調函數在promise對象進入完成狀態時會觸發,並傳遞結果;rejectedHandler函數會在拒絕狀態下調用。

Jquery在1.5的版本中引入了一個新的概念叫Deferred,就是CommonJS promise A標準的一種衍生。可以在jQuery中創建

$.Deferref的對象。同時也對發送ajax請求以及數據類型有了新的修改,參考JQuery API。

除了以上四種,javascript中還可以利用各種函數模擬非同步方式,更有詭異的諸如用同步調用非同步的case

只能用team里同事形容java和javascript的一句話作為結尾:

「寫java像在高速路上開車,寫javascript像在草原上開車」————-以此來形容javascript這種無類型的語言有多自由

but,如果草原上都是坑。

js非同步是什麼意思,怎麼理解js非同步思想呢?

就是網頁在載入的時候註冊事件,但是只有在點擊等事件發生後才會觸發函數

原創文章,作者:小藍,如若轉載,請註明出處:https://www.506064.com/zh-tw/n/284501.html

(0)
打賞 微信掃一掃 微信掃一掃 支付寶掃一掃 支付寶掃一掃
小藍的頭像小藍
上一篇 2024-12-22 15:08
下一篇 2024-12-22 15:41

相關推薦

  • JS Proxy(array)用法介紹

    JS Proxy(array)可以說是ES6中非常重要的一個特性,它可以代理一個數組,監聽數據變化並進行攔截、處理。在實際開發中,使用Proxy(array)可以方便地實現數據的監…

    編程 2025-04-29
  • 解決.net 6.0運行閃退的方法

    如果你正在使用.net 6.0開發應用程序,可能會遇到程序閃退的情況。這篇文章將從多個方面為你解決這個問題。 一、代碼問題 代碼問題是導致.net 6.0程序閃退的主要原因之一。首…

    編程 2025-04-29
  • ArcGIS更改標註位置為中心的方法

    本篇文章將從多個方面詳細闡述如何在ArcGIS中更改標註位置為中心。讓我們一步步來看。 一、禁止標註智能調整 在ArcMap中設置標註智能調整可以自動將標註位置調整到最佳顯示位置。…

    編程 2025-04-29
  • Python中init方法的作用及使用方法

    Python中的init方法是一個類的構造函數,在創建對象時被調用。在本篇文章中,我們將從多個方面詳細討論init方法的作用,使用方法以及注意點。 一、定義init方法 在Pyth…

    編程 2025-04-29
  • Python創建分配內存的方法

    在python中,我們常常需要創建並分配內存來存儲數據。不同的類型和數據結構可能需要不同的方法來分配內存。本文將從多個方面介紹Python創建分配內存的方法,包括列表、元組、字典、…

    編程 2025-04-29
  • 用不同的方法求素數

    素數是指只能被1和自身整除的正整數,如2、3、5、7、11、13等。素數在密碼學、計算機科學、數學、物理等領域都有著廣泛的應用。本文將介紹幾種常見的求素數的方法,包括暴力枚舉法、埃…

    編程 2025-04-29
  • Python中讀入csv文件數據的方法用法介紹

    csv是一種常見的數據格式,通常用於存儲小型數據集。Python作為一種廣泛流行的編程語言,內置了許多操作csv文件的庫。本文將從多個方面詳細介紹Python讀入csv文件的方法。…

    編程 2025-04-29
  • 使用Vue實現前端AES加密並輸出為十六進位的方法

    在前端開發中,數據傳輸的安全性問題十分重要,其中一種保護數據安全的方式是加密。本文將會介紹如何使用Vue框架實現前端AES加密並將加密結果輸出為十六進位。 一、AES加密介紹 AE…

    編程 2025-04-29
  • Python學習筆記:去除字元串最後一個字元的方法

    本文將從多個方面詳細闡述如何通過Python去除字元串最後一個字元,包括使用切片、pop()、刪除、替換等方法來實現。 一、字元串切片 在Python中,可以通過字元串切片的方式來…

    編程 2025-04-29
  • 用法介紹Python集合update方法

    Python集合(set)update()方法是Python的一種集合操作方法,用於將多個集合合併為一個集合。本篇文章將從以下幾個方面進行詳細闡述: 一、參數的含義和用法 Pyth…

    編程 2025-04-29

發表回復

登錄後才能評論