這篇文章主要介紹“JS事件循環(huán)實(shí)例代碼分析”，在日常操作中，相信很多人在JS事件循環(huán)實(shí)例代碼分析問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”JS事件循環(huán)實(shí)例代碼分析”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

為江津等地區(qū)用戶提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù)，及江津網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè)、江津網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！

JS為何設(shè)計(jì)為單線程

js設(shè)計(jì)為單線程還是跟他的用途有關(guān)

試想一下 如果js設(shè)計(jì)為多線程 那么同時(shí)修改和刪除同一個(gè)dom瀏覽器又該如何執(zhí)行?

#JS為何需要異步

for (var i=0;i<9999;i++){  console.log("我在執(zhí)行 但用戶不知道")
}console.log("你好啊")

上面例子for循環(huán)耗時(shí)會(huì)很久

這意味著 用戶得不到 '你好啊' 的響應(yīng) 就會(huì)下意識(shí)會(huì)認(rèn)為瀏覽器卡死了 所以js必須要有異步

js通過(guò)事件循環(huán)來(lái)實(shí)現(xiàn)異步 這也是js的運(yùn)行機(jī)制

JS事件的循環(huán)

1.歸類

遇到同步任務(wù)直接執(zhí)行,遇到異步任務(wù)分類為宏任務(wù)(macro-task)和微任務(wù)(micro-task)。

宏任務(wù)：整體的Script setTimeout setInterval

微任務(wù)：Promise process.nextTick

示例代碼

// 這是一個(gè)同步任務(wù)console.log('1')            --------> 直接被執(zhí)行                                      目前打印結(jié)果為：1// 這是一個(gè)宏任務(wù)setTimeout(function () {    --------> 整體的setTimeout被放進(jìn)宏任務(wù)列表  console.log('2')                    目前宏任務(wù)列表記為【s2】
});new Promise(function (resolve) {  // 這里是同步任務(wù)
  console.log('3');         --------> 直接被執(zhí)行
  resolve();                          目前打印結(jié)果為：1、3
  // then是一個(gè)微任務(wù)}).then(function () {       --------> 整體的then[包含里面的setTimeout]被放進(jìn)微任務(wù)列表  console.log('4')                    目前微任務(wù)列表記為【t45】
  setTimeout(function () {    console.log('5')
  });
});

第一輪小結(jié)：
執(zhí)行到這里的結(jié)果：1、3宏任務(wù)列表如下：
setTimeout(function () {  console.log('2')
});
微任務(wù)列表如下：
then(function () {  console.log('4')
  setTimeout(function () {    console.log('5')
  });
});

2.有微則微，無(wú)微則宏

如果微任務(wù)列表里面有任務(wù)會(huì)執(zhí)行完畢后在執(zhí)行宏任務(wù)。

瀏覽器瞅了一眼微任務(wù)列表 發(fā)現(xiàn)里面有微任務(wù) 就開始全部執(zhí)行
then(function () {  console.log('4')            --------> 直接被執(zhí)行
                                        目前打印結(jié)果為：1、3、4
  setTimeout(function () {    --------> 被放進(jìn)宏任務(wù)列表了    console.log('5')                    目前宏任務(wù)列表記為【s2、s5】
  });
});
瀏覽器發(fā)現(xiàn)微任務(wù)執(zhí)行完畢了
開始執(zhí)行宏任務(wù)列表
setTimeout(function () {  console.log('2')   --------> 直接被執(zhí)行
                               目前打印結(jié)果為：1、3、4、2});
setTimeout(function () {  console.log('5')   --------> 直接被執(zhí)行
                               目前打印順序?yàn)椋?nbsp;1、3、4、2、5、5});
最終結(jié)果為： 1、3、4、2、5

3.總結(jié)+實(shí)戰(zhàn)

反復(fù)執(zhí)行以上步驟就是事件循環(huán)(event loop) 一定要分的清任務(wù)類型 (宏任務(wù)和微任務(wù))

 TIP: 為了容易辨別起名為p1（p開頭 里面打印1）
  process.nextTick(function() {         --------> 被放微任務(wù)列表    console.log('1');                             微任務(wù)列表記為：【p1】
  })  new Promise(function (resolve) {    console.log('2');                   --------> 直接執(zhí)行
    resolve();                                    目前打印順序?yàn)椋?
  }).then(function () {                 --------> 整體的then被放進(jìn)微任務(wù)列表[包含其中的setTimeout 4]    console.log('3');                             微任務(wù)列表記為：【p1 t34】
    setTimeout(function () {      console.log('4')
    });
  });
  setTimeout(function () {              --------> 被放宏任務(wù)列表    console.log('5')                              宏任務(wù)列表記為：【s5】
  });  new Promise(function (resolve) {
    setTimeout(function () {            --------> 被放宏任務(wù)列表      console.log('6')                            宏任務(wù)列表記為：【s5 s6】
    });
    resolve()
  }).then(function () {                 --------> 整體的then被放進(jìn)微任務(wù)列表[包含其中的setTimeout和其中的多層嵌套]
    setTimeout(function () {                      微任務(wù)列表記為：【p1 t34 t789】      console.log('7')      new Promise(function (resolve) {
        setTimeout(function () {          console.log('8')
        });
        resolve()
      }).then(function () {
        setTimeout(function () {          console.log('9')
        });
      });
    });
  });  console.log('10')                      --------> 直接執(zhí)行
                                                   目前打印順序?yàn)椋?、10

第一輪小結(jié)：
執(zhí)行結(jié)果為：2、10宏任務(wù)列表如下：// s5setTimeout(function () {  console.log('5')
});//s6setTimeout(function () {  console.log('6')
});
微任務(wù)列表如下：// p1process.nextTick(function() {  console.log('1');
})// t34then(function () {  console.log('3');
  setTimeout(function () {    console.log('4')
  });
});// t789then(function () {
  setTimeout(function () {    console.log('7')    new Promise(function (resolve) {
      setTimeout(function () {        console.log('8')
      });
      resolve()
    }).then(function () {
      setTimeout(function () {        console.log('9')
      });
    });
  });

開始執(zhí)行第二輪：
有微任務(wù) 先執(zhí)行微任務(wù)
將微任務(wù)列表代碼塊搬下來(lái)// p1process.nextTick(function() {             --------> 執(zhí)行p1  console.log('1');                                 目前打印順序?yàn)椋?、10、1})// t34then(function () {  console.log('3');                       --------> 直接執(zhí)行
                                                    目前打印順序?yàn)椋?、10、1、3
  setTimeout(function () {                --------> 被放宏任務(wù)列表    console.log('4')                                宏任務(wù)列表記為：【s5 s6 s4】
  });
});// t789then(function () {
  setTimeout(function () {              --------> 被放宏任務(wù)列表    console.log('7')                              宏任務(wù)列表記為：【s5 s6 s4 s789】    new Promise(function (resolve) {
      setTimeout(function () {        console.log('8')
      });
      resolve()
    }).then(function () {
      setTimeout(function () {        console.log('9')
      });
    });
  });
})
微任務(wù)執(zhí)行完畢了 該執(zhí)行我們的宏任務(wù)列表了
因?yàn)槲⑷蝿?wù)里面包含一部分宏任務(wù)
所以現(xiàn)在的宏任務(wù)列表已經(jīng)增加了
現(xiàn)在把當(dāng)前的宏任務(wù)列表搬下來(lái)//s5setTimeout(function () {           --------> 執(zhí)行s5  console.log('5')                           目前打印順序?yàn)椋?、10、1、3、5});//s6setTimeout(function () {           --------> 執(zhí)行s6  console.log('6')                           目前打印順序?yàn)椋?、10、1、3、5、6});//s4setTimeout(function () {           --------> 執(zhí)行s4  console.log('4')                           目前打印順序?yàn)椋?、10、1、3、5、6、4});// s789setTimeout(function () {           --------> 執(zhí)行s789  console.log('7')                           目前打印順序?yàn)椋?、10、1、3、5、6、4、7
  new Promise(function (resolve) {
    setTimeout(function () {       --------> 被放宏任務(wù)列表      console.log('8')                       宏任務(wù)列表記為：【s8】
    });
    resolve()
  }).then(function () {            --------> 整體的then被放微任務(wù)列表[包含里面的setTimeout]
    setTimeout(function () {                 微任務(wù)列表記為：【t9】      console.log('9')
    });
  });
});

再次小結(jié)：
當(dāng)前結(jié)果：2、10、1、3、5、6、4、7馬上就要執(zhí)行完了心里萬(wàn)分激動(dòng)啊 （ 瀏覽器的內(nèi)心獨(dú)白 ^▽^  ...）
宏任務(wù)列表如下：// s8setTimeout(function () {  console.log('8')
});
微任務(wù)列表如下：// t9then(function () {
  setTimeout(function () {    console.log('9')
  });
});
繼續(xù)執(zhí)行 依舊遵循有微則微 無(wú)微則宏
瀏覽器發(fā)現(xiàn)有一條微任務(wù)
那就開始執(zhí)行吧~//t9then(function () {
  setTimeout(function () {   --------> 執(zhí)行t9 把里面的setTimeout放入宏任務(wù)列表    console.log('9')                   宏任務(wù)列表記為：【s8 s9】
  });
});
微任務(wù)列表執(zhí)行完畢
開始執(zhí)行宏任務(wù)（宏任務(wù)剛剛又有新增哦~[s9]）// s8setTimeout(function () {     --------> 執(zhí)行s8  console.log('8')                     目前打印順序?yàn)椋?、10、1、3、5、6、4、7、8});// s9setTimeout(function () {     --------> 執(zhí)行s9  console.log('9')                     目前打印順序?yàn)椋?、10、1、3、5、6、4、7、8、9});

到這里微任務(wù)列表和宏任務(wù)列表均為空，就執(zhí)行完畢了

到此，關(guān)于“JS事件循環(huán)實(shí)例代碼分析”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！