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

使用異步的場(chǎng)景：

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

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

事件綁定

//同步
  console.log(100);
  alert(200);//同步會(huì)造成阻塞
  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");

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

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

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

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

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

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

什么時(shí)候開(kāi)啟異步任務(wù)？

setTimeout和setInterval；

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

es6中的Promise。

     // 1.打印出順序?yàn)?、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){
        
    }

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

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

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

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

Thu Mar 15 2018 17:40:53 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間) 5
Thu Mar 15 2018 17:40:53 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間) 5
Thu Mar 15 2018 17:40:53 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間) 5
Thu Mar 15 2018 17:40:53 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間) 5
Thu Mar 15 2018 17:40:53 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間) 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);

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

Thu Mar 15 2018 17:46:54 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間) 0
Thu Mar 15 2018 17:46:54 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間) 1
Thu Mar 15 2018 17:46:54 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間) 2
Thu Mar 15 2018 17:46:54 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間) 3
Thu Mar 15 2018 17:46:54 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間) 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);

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

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