這篇文章主要講解了javascript中異步的實(shí)例解析，內(nèi)容清晰明了，對(duì)此有興趣的小伙伴可以學(xué)習(xí)一下，相信大家閱讀完之后會(huì)有幫助。

成都創(chuàng)新互聯(lián)公司基于成都重慶香港及美國(guó)等地區(qū)分布式IDC機(jī)房數(shù)據(jù)中心構(gòu)建的電信大帶寬，聯(lián)通大帶寬，移動(dòng)大帶寬，多線BGP大帶寬租用,是為眾多客戶提供專(zhuān)業(yè)雅安服務(wù)器托管報(bào)價(jià)，主機(jī)托管價(jià)格性價(jià)比高，為金融證券行業(yè)服務(wù)器托管，ai人工智能服務(wù)器托管提供bgp線路100M獨(dú)享，G口帶寬及機(jī)柜租用的專(zhuān)業(yè)成都idc公司。

js 異步解析

一 、js單線程分析

     我們都知道js的一大特點(diǎn)是單線程，也就是同一時(shí)間點(diǎn)，只能處理一件事，一句js代碼。那為什么js要設(shè)計(jì)成單線程而不是多線程呢？這主要和js的用途有關(guān)，js作為瀏覽器端的腳本語(yǔ)言，主要的用途為用戶與服務(wù)端的交互與操作dom。而操作dom就注定了js只能是單線程語(yǔ)言。假如js才取多線程將會(huì)出現(xiàn)，多個(gè)線程同時(shí)對(duì)一個(gè)dom進(jìn)行操作的情況，瀏覽器將無(wú)法判斷如何渲染。不僅js是單線程，瀏覽器渲染dom也是單線程的，js的執(zhí)行和瀏覽器渲染dom共用的一個(gè)線程，這就導(dǎo)致了在html代碼中書(shū)寫(xiě)js代碼會(huì)造成瀏覽器端渲染的阻塞。例如：在html某個(gè)位置，寫(xiě)一個(gè)段帶有alert（‘稍等'），alert 之前html已經(jīng)被渲染出來(lái)，而alert之后的html被這段js阻塞了。為了利用多核CPU的計(jì)算能力，HTML5提出Web Worker標(biāo)準(zhǔn)，允許JavaScript腳本創(chuàng)建多個(gè)線程，但是子線程完 全受主線程控制，且不可進(jìn)行DOM操作。所以，這個(gè)新標(biāo)準(zhǔn)并沒(méi)有改變JavaScript單線程的本質(zhì)。

     所謂的js單線程，是指在瀏覽器中JS引擎負(fù)責(zé)解釋和執(zhí)行JavaScript代碼的線程只有一個(gè)。不妨叫它主線程。但是實(shí)際上瀏覽器處理js還存在其他的線程。例如：處理AJAX請(qǐng)求的線程、處理DOM事件的線程、定時(shí)器線程、讀寫(xiě)文件的線程(例如在Node.js中)等等。這些線程可能存在于JS引擎之內(nèi)，也可能存在于JS引擎之外，在此我們不做區(qū)分。不妨叫它們工作線程。

     總結(jié)一下：js之所以才取單線程模式是為了避免DOM渲染沖突。而瀏覽器中執(zhí)行js線程是單線程我們稱(chēng)它為主線程，同時(shí)還存在其它處理js的線程，我們稱(chēng)它為工作線程。js是單線程，但瀏覽器是多線程的。

二 、同步與異步

     單線程就意味著，所有任務(wù)需要排隊(duì)，前一個(gè)任務(wù)結(jié)束，才會(huì)執(zhí)行后一個(gè)任務(wù)。如果前一個(gè)任務(wù)耗時(shí)很長(zhǎng)，后一個(gè)任務(wù)就不得不一直等著。這就是同步代碼阻塞。如果排隊(duì)是因?yàn)橛?jì)算量大，CPU忙不過(guò)來(lái)，倒也算了，但是很多時(shí)候CPU是閑著的，因?yàn)镮O設(shè)備（輸入輸出設(shè)備）很慢（比如Ajax操作從網(wǎng)絡(luò)讀取數(shù)據(jù)），不得不等著結(jié)果出來(lái)，再往下執(zhí)行。JavaScript語(yǔ)言的設(shè)計(jì)者意識(shí)到，這時(shí)主線程完全可以不管IO設(shè)備，掛起處于等待中的任務(wù)，先運(yùn)行排在后面的任務(wù)。等到IO設(shè)備返回了結(jié)果，再回過(guò)頭，把掛起的任務(wù)繼續(xù)執(zhí)行下去。

     簡(jiǎn)單的說(shuō)，同步就是會(huì)阻塞代碼的執(zhí)行，而異步不會(huì)。同樣拿alert('稍等') 來(lái)舉例，在一段js代碼中加入一段alert，如果沒(méi)有點(diǎn)擊確認(rèn)，此時(shí)代碼的執(zhí)行就被阻塞了，大多數(shù)js代碼都是同步執(zhí)行的。異步則相反。那為什么js中要引入異步的概念呢，很簡(jiǎn)單，由于js的單線程，當(dāng)遇到耗時(shí)的操作時(shí)如果采用同步的執(zhí)行，那么我們就不可能看到如今這么流暢的web應(yīng)用了。再舉個(gè)簡(jiǎn)單的例子：在一條單行道上行駛著很多汽車(chē)，假如其中某一輛車(chē)出現(xiàn)機(jī)械故障，將會(huì)導(dǎo)致后面的車(chē)也無(wú)法通過(guò)，此時(shí)應(yīng)該將故障的車(chē)?yán)肱赃叺膽?yīng)急車(chē)道進(jìn)行修復(fù)，待它修好之后再重新駛?cè)胫鞲傻乐?，不?huì)影響主干道其它行駛的汽車(chē)。所以，異步是js單線程下解決耗時(shí)問(wèn)題的一種“無(wú)可奈何”的解決方案。也是一種近乎完美的解決方案。

三、js異步與事件輪詢

     事件輪詢（event loop）是js異步的實(shí)現(xiàn)方式。簡(jiǎn)而言之，在js單線程中分為兩種任務(wù)，一種是同步任務(wù)（synchronous），另一種是異步任務(wù)（asynchronous）。同步任務(wù)指的是，在主線程上排隊(duì)執(zhí)行的任務(wù)，只有前一個(gè)任務(wù)執(zhí)行完畢，才能執(zhí)行后一個(gè)任務(wù)；異步任務(wù)指的是，不進(jìn)入主線程、而進(jìn)入”任務(wù)隊(duì)列”（task queue）的任務(wù)，只有當(dāng)主進(jìn)程中所有同步任務(wù)執(zhí)行完畢，且”任務(wù)隊(duì)列”通知主線程，某個(gè)異步任務(wù)可以執(zhí)行了，該任務(wù)才會(huì)進(jìn)入主線程執(zhí)行。事件輪詢就是將主線程中的異步任務(wù)掛載到任務(wù)隊(duì)列中，再待到合的時(shí)機(jī)，將任務(wù)隊(duì)列中的異步函數(shù)拉到主進(jìn)程來(lái)執(zhí)行的這么一個(gè)流程。

js中異步操作主要有：

     1、定時(shí)任務(wù)（setTimeout、setInterval）

     2、網(wǎng)路請(qǐng)求（ajax、動(dòng)態(tài)<img>加載）

     3、事件綁定（click，focus，change等）

 js異步具體執(zhí)行流程分析

     大家看一下左邊代碼，兩個(gè)console.log操作，兩個(gè)setTitmeout 操作。按照我們對(duì)異步的理解，在主線程中 console.log 為同步任務(wù)從上到下依次執(zhí)行，所以在最先打印的是3，當(dāng)執(zhí)行到第一setTimeout時(shí)，瀏覽器js引擎會(huì)自動(dòng)將setTimeout放入工作線程中。ps：在工作線程中，待0.1s后將setTimeout 的回調(diào)函數(shù)放入異步隊(duì)列中；主進(jìn)程中下一個(gè)setTimeout ，但是它的延遲時(shí)間為0，這并不意味著它能同步執(zhí)行，它依舊經(jīng)歷如上兩個(gè)過(guò)程，從工作進(jìn)程中，0s后放入任務(wù)隊(duì)列。接下來(lái)是執(zhí)行console.log(3);當(dāng)主進(jìn)程中任務(wù)已經(jīng)執(zhí)行完畢。任務(wù)隊(duì)列中有一個(gè)監(jiān)視器，隨時(shí)監(jiān)視著主進(jìn)程和任務(wù)隊(duì)列中的異步函數(shù)情況，當(dāng)主進(jìn)程執(zhí)行完畢，就判斷任務(wù)隊(duì)列中是否有需要執(zhí)行的函數(shù)，如果有就按照隊(duì)列現(xiàn)后順序依次放入主進(jìn)程中，以此往復(fù)。

     所以上面代碼，依次打印為：3，3，2，1。也就是先將非異步執(zhí)行完，再回過(guò)頭來(lái)執(zhí)行異步函數(shù)，異步函數(shù)執(zhí)行順序?yàn)殛?duì)列規(guī)則，先進(jìn)先出，也就是先進(jìn)入隊(duì)列的異步函數(shù)將優(yōu)先執(zhí)行。

     思考：如果一段代碼中現(xiàn)后存在一個(gè)ajax 和一個(gè)1s的定時(shí)函數(shù)，那么他們誰(shuí)先執(zhí)行呢？ 答案是：不確定。因?yàn)椴淮_定ajax請(qǐng)求完畢進(jìn)入隊(duì)列的時(shí)間。小伙伴們可別被面試管套路了哦。哈哈。

四、前端異步的寫(xiě)法

     1、回調(diào)函數(shù)，也就是在setTimeout或者ajax中添加回調(diào)函數(shù)，待到指定時(shí)間后或者請(qǐng)求到數(shù)據(jù)后再執(zhí)行回調(diào)。

     2、ES6標(biāo)準(zhǔn)：Promise，ES7:async await   這兩種都只是js事件輪詢實(shí)現(xiàn)異步的一種優(yōu)雅的 方式，將異步變?yōu)橥降膶?xiě)法，但都并未改變js異步本質(zhì)。

看完上述內(nèi)容，是不是對(duì)javascript中異步的實(shí)例解析有進(jìn)一步的了解，如果還想學(xué)習(xí)更多內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

新聞名稱(chēng)：javascript中異步的實(shí)例解析
本文URL：http://www.rwnh.cn/article42/gdgdhc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動(dòng)網(wǎng)站建設(shè)、網(wǎng)站收錄、商城網(wǎng)站、做網(wǎng)站、服務(wù)器托管、標(biāo)簽優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)