JavaScript中的同步與異步

時間 2020-06-14

原文原文鏈接

前言

平日的編碼中,你能列出你經常使用的異步編碼?怎麼理解同步與異步?html

若是僅僅停留在文字上的理解,我的以爲有口無意,每當屢屢面試時,這都是一個常問的話題,牽扯到的是事件的執行順序,任務隊列,在js當中對於異步處理任務,是一個很是重要知識.前端

如何看待同步?

因爲js是單線程的,換句話說,就是,在同一段時間內,只能處理一個任務,幹一件事情,而後再去處理下一個任務,瀏覽器解析網頁中的js代碼,是逐行進行讀取,從上至下執行的 實例場景:打電話就是一個同步的例子,必須等待打完了一個,而後再接着打下一個的node

在如何看待同步以前,有必要了解下計算機中兩個專業術語概念,就是進程和線程web

進程: 它是系統進行資源分配和調度的一個獨立單位,具備必定獨立功能的程序關於某個數據集合上的一次運行活動,能夠粗俗的理解爲主(大)任務面試

**線程:**安排CPU執行的最小單位,能夠理解爲子任務ajax

**關係:**線程能夠視做爲進程的子集,一個進程能夠有多個線程併發執行chrome

區別:進程和線程的主要差異在於,它們是不一樣的操做系統資源管理方式。進程有獨立的地址空間，一個進程崩潰後，在保護模式下不會對其它進程產生影響，而線程只是一個進程中的不一樣執行路徑。json

線程有本身的堆棧和局部變量，但線程之間沒有單獨的地址空間，一個線程死掉就等於整個進程死掉，因此多進程的程序要比多線程的程序健壯，但在進程切換時，耗費資源較大，效率要差一些。後端

但對於一些要求同時進行而且又要共享某些變量的併發操做，只能用線程，不能用進程跨域

在後文中會用具體的代碼,來認識同步的

爲何js是單線程?

JavaScript之因此設計爲單線程,這與它的用途有關。它做爲瀏覽器腳本語言，主要用途是負責與頁面的交互，以及操做DOM(添加,刪除等),它只能是單線程的，不然它就會帶來很複雜的同步問題。

好比，你在網頁上有若干個操做,也就是在主線程中有多個任務，一個線程任務是在某個DOM節點上添加內容，另外一個線程任務是刪除這個節點，這時瀏覽器應該以哪一個線程爲準？

因此，爲了不復雜性，從一誕生，JavaScript就是單線程的，這已是這門語言的核心特徵，未來也不會改變

而單線程，是指在JS引擎中負責解釋和執行JavaScript代碼的線程只有一個,但瀏覽器是多線程的,而js是單線程的,二者並不矛盾,瀏覽器只是js宿主的運行環境

怎麼理解異步?

瀏覽器是多線程的,但解析咱們的js代碼,倒是單線程的,但有些任務是須要消耗時間的（好比:上傳,讀取文件,下載等）,若是按照普通的同步方式,就會阻塞咱們的代碼，主線程的任務沒有作完,那麼下面的任務將不會執行

實例場景:給女票打電話,必須等待到對方接聽,有反應後,才能繼續後面的熱戀,你得一直等待,幹不了別的事情,在那苦等的耗着

但發短信,微信就是一個異步的例子,也許對方正忙,沒有及時回覆,你沒必要等待對方及時迴應,你仍能夠繼續幹其餘的事情。等到對方看見了,便會迴應你.

單線程中有一些任務須要耗費一些時間,讓用戶去等待確認,把一些耗時的事情任務經過新開的線程方式來實現,瀏覽器會針對對於那些耗時間的任務,會開一些新的進程單獨去處理

主線程繼續往下走,那麼這個時候,它既不影響後續代碼的執行,同時還能經過另外的線程去作事,而後等待另外的線程作完事以後

好比說:經過回調,事件的方式去通知咱們的主線程,而後把Ajax等異步處理要作的事情,在推到主線程當中進行執行

那有哪些東西是須要從新開線程的?既然js是單線程的，那麼他是如何是實現異步操做的？咱們把這些任務稱爲:異步任務同一段時間內能夠作多個任務,例如

setTimeout
setInterval
ajax
...

監聽DOM,修改頁面的操做,渲染咱們的樣式,都是須要瀏覽器去處理的

這樣的話,所謂的異步請求就很好理解了

指web服務器對請求做出響應時不要求你等待,這說明,瀏覽器解析js代碼,當遇到異步任務時,不會僵持在那裏不動,它會繼續作主線程的任務,並會在服務器處理完請求時通知你.

那麼在具體的代碼中,是怎麼體現的? 這裏以Ajax爲例: 咱們先看寫一段簡單的後端代碼

/**
 * 
 * @authors 川川 (itclancode@163.com)
 * @ID suibichuanji
 * @weChatNum 微信公衆號:itclancoder
 * @version $Id$
 */
var http = require('http') // 使用http對象來引用http模塊
var url = require('url');
var jsonData = { "name": "川川", "age": 20, "job": "weber" };
var app = http.createServer(function(req, res) { // 使用http模塊的createServer方法來建立用於接收HTTP客戶端請求並返回的響應的HTTP服務器應用程序,在createServer方法中定義了當服務器接收到客戶端請求時所執行的回調函數,在該回調函數中指定當服務器接收到客戶端請求時所要執行的處理,第一個參數req表明的是客戶端請求對象,第二個參數表明服務器端所作出的響應對象
    res.writeHead(200, {
        'Content-Type': 'application/json;charset=utf-8',
        'Access-Control-Allow-Credentials': true,
        'Access-Control-Allow-Origin': '*' //能夠是*，也能夠是跨域的地址
    })



    // url.parse 方法來解析 URL 中的參數
    var pathname = url.parse(req.url, true).pathname;
    if (pathname == '/index') {
        setTimeout(function() {
            res.end(JSON.stringify(jsonData)); // 經過響應對象res的end方法輸出一json對象,並結束響應流
        }, 3000)
    }

})

app.listen(8083, "127.0.0.1"); // createServer方法將返回被建立的HTTP服務器對象,咱們使用該對象的listen方法指定服務器使用端口及服務器綁定的地止,並對該端口進行監聽

console.log('server running at http:127.0.0.1:8083/');

將這段代碼命名爲server.js,而後在當前目錄下執行node server.js,就會啓動後端的服務在瀏覽器端地止欄:輸入http://127.0.0.1:8083/index

那麼在瀏覽器前端: 若是想要把這個數據添加到瀏覽器前端頁面上,那該怎麼操做? 以下代碼所示:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>01異步與同步</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
    *{
        padding: 0;
        margin: 0;
    }

    #box{
        width: 100px;
        height: 100px;
        background: red;
    }
</style>
</head>
<body>
        <button id="btn">按鈕</button>
        <div id="list-wrap"></div>
        <div id="box"></div>

        <script>
            var oBtn = document.querySelector('#btn');
            var oBox = document.querySelector('#box');
            var oListWrap = document.querySelector("#list-wrap");
 
            var ul = document.createElement('ul');
            oListWrap.appendChild(ul);
            var str = "";
            oBtn.onclick = function(){
                console.log("任務2");
                var xhr  = new XMLHttpRequest();
                xhr.onload = function(){
                   console.log(xhr.readyState);
                   if(this.readyState== 4 ){
                      if(this.status == 200){
                        var data = JSON.parse(this.responseText);
                      }
                        
                   }
                   console.log("任務3");
                   console.log(data);
                   var listAttrs = Object.keys(data).map(function(item){
                      return data[item]
                   });
                   var attrs = Object.keys(data).map(function(item){
                      return item;
                   })
                   console.log(listAttrs);
                   for(let i = 0;i<attrs.length;i++){
                     
                     str += "<li>"+attrs[i]+":"+listAttrs[i]+"</li>";
                     

                     ul.innerHTML = str;
                   }
                   
                }
               
               xhr.open('get', 'http:127.0.0.1:8083/index',true);
                
                console.log("任務4");
                // true表示異步,ajax的事情尚未處理完成的時候,咱們點擊div,能夠立馬變色,ajax的事情並不影響當前頁面中其餘效果,開啓了一個新的線程去完成ajax的事情,並不影響主線程,其餘頁面在主線程當中的其餘任務的
                // false同步,當前線程直接處理
                xhr.send();
            }
            // 點擊操做
            oBox.onclick =  function(){
                this.style.background = "green";
            }

            console.log("任務1");
</script>
</body>
</html>

上面代碼的主要功能是:點擊按鈕,加載後端數據,將數據添加到前端頁面中

若是把xhr.open()的第三個參數設置爲false,則是同步的,當你點擊按鈕後,你點擊下面的方塊框,點擊事件它是不會執行的,必須得等到上面的事情(加載數據)作完了,在次點擊時,它纔會生效

在使用Ajax的時候,應該推薦使用異步的方式,而不該該是同步的,否則的話,它就會阻塞咱們後續的代碼執行

若是你把 xhr.open()的第三個參數設置爲false,那麼當你點擊按鈕後,在點擊紅色的box,它是不會起做用的,只有等待響應的結果執行完後,點擊紅色的box,纔會生效執行

JS爲何須要異步？

JS是單線程的，那確定只能同步(排隊)順序執行代碼,是沒有疑問的,寫同步代碼的好處就是好理解,壞處就是容易阻塞,只能等待上一次任務作完了,在接着作下一個任務.

而寫異步代碼的好處,就是實現讓程序可控,想讓它按照咱們的想要的結果進行輸出,壞處顯然就是很差理解,射出去的弓箭,又要繞回來. 若是JS中不存在異步,只能自上而下執行,萬一上一行解析代碼的時間很長,那麼下面的代碼就會被阻塞。對於用戶而言,阻塞就意味着"卡死",這樣就致使了不好的用戶體驗

想一想在一個聊天室裏,你發一條信息,必需要等待對方迴應後,才能在發一條信息,這顯然會使人奔潰的

那js單線程又是如何實現異步的呢

是經過事件循環(event loop)實現異步的,這個詞在不少前端技術書籍上都提到過,可是每次看完,老是不理解,知道有那麼一回事,但就是解釋不清楚

下面這個經典的問題:猜猜它的輸出結果

console.log('1')
setTimeout(function(){
 console.log('2')
},0)
console.log('3')

想必你們閉着眼都能答上來,輸入的順序是1,3,2,可是解釋一下爲何,卻老是道不明白.

setTimeout裏的匿名函數並無當即執行,而是延遲了一段時間,等知足必定條件後,纔去執行的,匿名函數沒有當即被調用棧執行,而是添加一個隊列中,專業點稱爲任務隊列,相似這樣的代碼,咱們叫異步代碼。

首先咱們知道了JS裏的一種任務分類方式,就是將任務分爲: 同步任務和異步任務

雖然JS是單線程的,可是瀏覽器的內核倒是多線程的,在瀏覽器的內核中不一樣的異步操做由不一樣的瀏覽器內核模塊調度執行,異步任務操做會將相關回調添加到任務隊列中。

而不一樣的異步操做添加到任務隊列的時機也不一樣，好比onclick, setTimeout, ajax 處理的方式都不一樣，這些異步操做是由瀏覽器內核來執行的，瀏覽器內核上包含3種 webAPI,分別是 DOM Binding(DOM綁定)、network(網絡請求)、timer(定時器)模塊。

按照這種分類方式:JS的執行機制是

首先判斷js代碼是同步仍是異步,不停的檢查調用棧中是否有任務須要執行,若是沒有,就檢查任務隊列,從中彈出一個任務,放入棧中,如此往復循環,要是同步就進入主進程,異步就進入事件表
異步任務在事件表中註冊函數,當知足觸發條件後,被推入事件隊列
同步任務進入主線程後一直執行,直到主線程空閒時,纔會去事件隊列中查看是否有可執行的異步任務,若是有就推入主進程中

以上三步循環執行,這就是事件循環(event loop),它是鏈接任務隊列和控制調用棧的 小結:

同步任務能夠保證順序一致,代碼可讀性好,相對容易理解,可是容易致使阻塞；異步任務能夠解決阻塞問題，可是會改變任務的順序性，根據不一樣的須要去寫你的代碼

顯然異步代碼是咱們經常使用的一種方式,也是比較複雜的,而在js中處理異步,也就誕生出了不少的工具處理異步問題

例如:回調函數(異步執行或稍後執行的函數,也能夠理解爲將一個函數的參數做爲另外一個函數的名字,那麼這個參數就叫作回調函數),使用Es6中的承諾(promise),Es7中的async await

爲了更好的理解回調函數,下面寫了幾行代碼,命名爲callback.js,讀取number.txt文件,在number.txt中寫了1234,而後執行node callback.js

var fs = require('fs');
var myNumber = undefined;
function addOne(callback){
   fs.readFile('number.txt', function doneReading(err, fileContents){
       myNumber = parseInt(fileContents);
       myNumber++;
       callback();
  })
}
function logMyNumber(){
   console.log(myNumber);
}
addOne(logMyNumber)

上面的 logMyNumber函數做爲 addOne函數的實參傳入進去,而在 addOne函數聲明處,用 callback參數變量進行接收,並在 addOne函數內進行調用執行( callback()),相似這種將一個函數做爲參數傳遞被另外一個函數調用執行的,這樣的函數就稱爲回調函數