js執(zhí)行機(jī)制

joyvw 發(fā)布于2019-08-23 10:57 / 2641人閱讀

摘要：在上面代碼中，進(jìn)入宏任務(wù)，并將注冊(cè)為宏任務(wù)放入隊(duì)列，接著執(zhí)行哈哈哈，遇到直接執(zhí)行，回調(diào)函數(shù)放置微任務(wù)隊(duì)列，接著執(zhí)行嘻嘻嘻，第二個(gè)如上。

在實(shí)際開發(fā)中，總是遇到請(qǐng)求結(jié)束后，想要把請(qǐng)求得到數(shù)據(jù)賦值給某一個(gè)對(duì)象或者變量，如果沒有在請(qǐng)求的回調(diào)函數(shù)中賦值，而是在請(qǐng)求語句下面賦值，我們會(huì)發(fā)現(xiàn)請(qǐng)求得到數(shù)據(jù)正常，但是賦值后的變量是undefined。這是為什么呢？
首先，我們要了解一個(gè)概念，就是同步與異步。眾所周知，js是單線程語言，也就是說，js一次只能執(zhí)行一個(gè)任務(wù)，如果有多個(gè)任務(wù)的話呢，那就按照任務(wù)的順序依次執(zhí)行。但是如果其中某一個(gè)任務(wù)耗費(fèi)大量時(shí)間，比如陷入死循環(huán)，那么其他任務(wù)都不能執(zhí)行，會(huì)造成瀏覽器無響應(yīng)。那么js是如何解決的呢？那就是將任務(wù)分為同步和異步模式進(jìn)行執(zhí)行。同步如上，異步呢是指，擁有大于一個(gè)的回調(diào)函數(shù)，任務(wù)在執(zhí)行結(jié)束時(shí)不是執(zhí)行下一個(gè)任務(wù)而是執(zhí)行回調(diào)函數(shù)，那么有人可能會(huì)有疑問，這樣做與同步有什么區(qū)別呢？區(qū)別在于，后一個(gè)任務(wù)不用等前一個(gè)任務(wù)完全執(zhí)行后再去執(zhí)行。因此我們得到的程序執(zhí)行順序不是任務(wù)的排列順序。

setTimeout(function(){
    console.log("第一個(gè)延時(shí)調(diào)用");
});
console.log("哈哈哈");
new Promise(function(resolve){
    console.log("promise任務(wù)嗎");
    resolve();
}).then(function(){
    console.log("回調(diào)函數(shù)？？？")
});
console.log("嘻嘻嘻");
setTimeout(function(){
    console.log("第二個(gè)延時(shí)調(diào)用");
});

執(zhí)行結(jié)果是什么呢？
哈哈哈
promise任務(wù)嗎
嘻嘻嘻
回調(diào)函數(shù)？？？

第一個(gè)延時(shí)調(diào)用
第二個(gè)延時(shí)調(diào)用
為什么是這樣呢？為什么setTimeout會(huì)在最后才執(zhí)行，明明是0ms啊。
是因?yàn)槌送疆惒侥Ｊ酵?，我們?duì)任務(wù)還有進(jìn)一步的劃分，宏任務(wù)和微任務(wù)。
宏任務(wù)：包括整體代碼script，setTimeout，setInterval
微任務(wù)：Promise，process.nextTick
在執(zhí)行時(shí)，進(jìn)入宏任務(wù)后，開始第一次循環(huán)，接著執(zhí)行所有微任務(wù)，然后在進(jìn)行宏任務(wù)的下次循環(huán)。
在上面代碼中，進(jìn)入宏任務(wù)，并將setTimeout注冊(cè)為宏任務(wù)放入隊(duì)列，接著執(zhí)行哈哈哈，遇到new Promise 直接執(zhí)行，回調(diào)函數(shù)放置微任務(wù)隊(duì)列，接著執(zhí)行嘻嘻嘻，第二個(gè)setTimeout如上。接著執(zhí)行微任務(wù)，這里僅有嘻嘻嘻。最后進(jìn)入下次宏任務(wù)。