【知識梳理】4.2JS運行機制

cgh1999520 發(fā)布于2019-08-22 15:57 / 3412人閱讀

摘要：任務(wù)隊列分同步任務(wù)異步任務(wù)，異步任務(wù)要掛起，同步任務(wù)全部執(zhí)行完再執(zhí)行異步任務(wù)。執(zhí)行棧執(zhí)行的是同步任務(wù)。什么時候開啟異步任務(wù)和事件的，先注冊函數(shù)體，觸發(fā)時放入異步任務(wù)隊列，再執(zhí)行點擊某一按鈕瀏覽器卡死中的。

1.對比同步和異步

使用異步的場景：

定時任務(wù)：setTimeout、setInterval

網(wǎng)絡(luò)請求：ajax請求、動態(tài)加載

事件綁定

//同步
  console.log(100);
  alert(200);//同步會造成阻塞
  console.log(300);

//異步
  console.log(100);
    setTimeout(function(){
        console.log(200);
    },1000);
  console.log(300);

//加載示例
console.log("start");
var img = document.createElement("img");
img.onload = function(){
    console.log("loaded");
}
img.src = "/xxx.png";
console.log("end");

2.同步任務(wù)和異步任務(wù)的優(yōu)先順序

JS是單線程的，即在同一時間只能做一件事。從上到下執(zhí)行。

任務(wù)隊列：分同步任務(wù)、異步任務(wù)（setTimeout()、setInterval()，異步任務(wù)要掛起，同步任務(wù)全部執(zhí)行完再執(zhí)行異步任務(wù)）。

Event Loop：同步任務(wù)放在運行棧里邊全部執(zhí)行，遇到異步任務(wù)先掛起，等到時間到了的時候（即使是0，瀏覽器最小的是4毫秒），Timer模塊會把他放到異步隊列中，當(dāng)js引擎發(fā)現(xiàn)運行棧里邊的同步任務(wù)全部執(zhí)行完后，再去讀異步任務(wù)隊列，發(fā)現(xiàn)里邊有東西后，讀出來放到運行棧中執(zhí)行，此時setTimeout函數(shù)體就變成了運行棧中的同步任務(wù)，執(zhí)行完后，棧空了，再去監(jiān)聽異步隊列中有沒有，如果有，再去執(zhí)行。這個循環(huán)過程就叫做event loop。

1.執(zhí)行棧執(zhí)行的是同步任務(wù)。

2.什么時候向異步隊列中取任務(wù)。

3.什么時候往異步隊列中放任務(wù)。

什么時候開啟異步任務(wù)？

setTimeout和setInterval；

DOM事件（js的addEventListener，先注冊函數(shù)體，觸發(fā)時放入異步任務(wù)隊列，再執(zhí)行；eg:點擊某一按鈕瀏覽器卡死）；

es6中的Promise。

     // 1.打印出順序為1、3、2
    console.log(1);
    setTimeout(function(){//setTimeout異步任務(wù)要掛起，同步任務(wù)全部執(zhí)行完再執(zhí)行異步任務(wù)
        console.log(2);
    },0);//4毫秒延遲
    console.log(3);

    // 2.只輸出a,while(true)是同步任務(wù)，一直在執(zhí)行
    console.log("a");
    while(true){

    }
    console.log("b");

    // 3.只輸出A,同步任務(wù)全部執(zhí)行完再執(zhí)行異步任務(wù)
    console.log("A");
    setTimeout(function(){
        console.log("B");
    },0);
    while(1){
        
    }

3.異步任務(wù)（隊列）的放入時間和執(zhí)行時間

    
    // 輸出四個4,for循環(huán)是個同步任務(wù)
    for(var i=0;i<4;i++){
        setTimeout(function(){//到1s時，Timer模塊才將其放入異步任務(wù)隊列中(放入時間)，等待事件循環(huán)執(zhí)行（執(zhí)行時間）
            console.log(i);
        },1000);
    }

4.一道面試題

//1.setTimeout()異步任務(wù)

for(var i=0;i<5;i++){
    setTimeout(function(){
        console.log(new Date,i);
    },1000);
}
console.log(new Date,i);

//運行結(jié)果
Thu Mar 15 2018 17:40:52 GMT+0800 (中國標(biāo)準(zhǔn)時間) 5

Thu Mar 15 2018 17:40:53 GMT+0800 (中國標(biāo)準(zhǔn)時間) 5
Thu Mar 15 2018 17:40:53 GMT+0800 (中國標(biāo)準(zhǔn)時間) 5
Thu Mar 15 2018 17:40:53 GMT+0800 (中國標(biāo)準(zhǔn)時間) 5
Thu Mar 15 2018 17:40:53 GMT+0800 (中國標(biāo)準(zhǔn)時間) 5
Thu Mar 15 2018 17:40:53 GMT+0800 (中國標(biāo)準(zhǔn)時間) 5


//2.立即執(zhí)行函數(shù)

for(var i=0;i<5;i++){
    (function(j=i){
       setTimeout(function(){
         console.log(new Date,j);
       },1000);//此處為1000
    })(i);
}
console.log(new Date,i);

//運行結(jié)果
Thu Mar 15 2018 17:46:53 GMT+0800 (中國標(biāo)準(zhǔn)時間) 5

Thu Mar 15 2018 17:46:54 GMT+0800 (中國標(biāo)準(zhǔn)時間) 0
Thu Mar 15 2018 17:46:54 GMT+0800 (中國標(biāo)準(zhǔn)時間) 1
Thu Mar 15 2018 17:46:54 GMT+0800 (中國標(biāo)準(zhǔn)時間) 2
Thu Mar 15 2018 17:46:54 GMT+0800 (中國標(biāo)準(zhǔn)時間) 3
Thu Mar 15 2018 17:46:54 GMT+0800 (中國標(biāo)準(zhǔn)時間) 4


//3.默認(rèn)4毫秒延遲
for(var i=0;i<5;i++){
    (function(j=i){
       setTimeout(function(){
         console.log(new Date,j);
       },0);//此處為0
    })(i);
}
console.log(new Date,i);

//運行結(jié)果
Thu Mar 15 2018 17:46:54 GMT+0800 (中國標(biāo)準(zhǔn)時間) 5

Thu Mar 15 2018 17:46:54 GMT+0800 (中國標(biāo)準(zhǔn)時間) 0
Thu Mar 15 2018 17:46:54 GMT+0800 (中國標(biāo)準(zhǔn)時間) 1
Thu Mar 15 2018 17:46:54 GMT+0800 (中國標(biāo)準(zhǔn)時間) 2
Thu Mar 15 2018 17:46:54 GMT+0800 (中國標(biāo)準(zhǔn)時間) 3
Thu Mar 15 2018 17:46:54 GMT+0800 (中國標(biāo)準(zhǔn)時間) 4