ajax二(異步的底層原理)
阿新 • • 發佈:2019-02-25
stat xxx fun open 方法 實現 color 情況 js代碼
異步的底層原理
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二(異步的底層原理)