異步的底層原理

js中的異步的實現的原理是單線程加事件隊列，js的代碼執行是單線程的，所謂的單線程的含義是js的代碼是從上往下按順序依次執行的，一定是上一行代碼執行完再執行下一行代碼。事件隊列可以認為是一個容器，這個容器中存儲一些回調函數。這些回調函數只有在js代碼全部執行完成之後，才有可能會去調用，因為js是單線程的，一次只能做一件事。

可以用setTimeout函數模擬一下:

setTimeout(function(){
    console.log(‘定時函數代碼執行了‘)
},2000)
console.log(‘正常代碼執行了‘)

解讀一下:

js代碼是從上往下執行，遇到setTimeout函數，是把裏面的函數放在事件隊列裏面，接著向下執行，再等到js空閑的情況下，會去事件隊列中看一下，有沒有方法達到觸發條件

所以執行的結果是：

setTimeout(function(){
    console.log(‘定時函數代碼執行了‘)
},2000)
console.log(‘正常代碼執行了‘)

//正常代碼執行了
//定時函數代碼執行了

大家肯定心存疑惑，總覺得是巧合，下面的例子就可以充分說明了我的觀點

setTimeout(function(){
    console.log(‘定時函數代碼執行了‘)
},2000)
var str = ‘‘
for(var i = 0;i < 10000000;i ++){
    str += i
}
console.log(‘正常代碼執行了‘)

在打印之前，添加了for循環，但是結果仍然是：

//正常代碼執行了
//定時函數代碼執行了

再在原來代碼上稍微改進一點

setTimeout(function(){
    console.log(‘定時函數代碼執行了‘)
},2000)
var str = ‘‘
for(var i = 0;i < 10000000;i ++){
    str += i
}
console.log(‘正常代碼執行了‘)
var str = ‘‘
for(var i = 0;i < 10000000;i ++){
    str += i
}

最後得到結果是：

先出現:正常代碼執行了

再出現:定時函數代碼執行了

最後再來看一下ajax代碼:

var xhr = new XMLHttpRequest() //1.創建對象
xhr.open(‘get‘,‘url?xxx‘+xxx,true) //2.準備發送
xhr.send(null) //3.執行發送
xhr.onreadystatechange = function (){ //4.回調函數
    if(xhr.readyState == 4){
        if(xhr.status == 200){
            var result = xhr.responseText
            console.log(result)
        }
    }
}

上圖js執行流程

1·········>2·········>3·········>4

當執行到第3步的時候

js請求瀏覽器進行網絡數據的請求

因為js是單線程的，但是瀏覽器不是單線程的。

ajax二(異步的底層原理)