從settimeout看javascript的運(yùn)行機(jī)制

JerryC 發(fā)布于2019-08-26 18:27 / 1251人閱讀

摘要：前言我們知道是一個(gè)單線程的語(yǔ)言，而且其運(yùn)行機(jī)制比較特殊。即異步任務(wù)一定在同步任務(wù)之后執(zhí)行。理解了閉包的同學(xué)一定可以理解這一點(diǎn)。

前言

我們知道JS是一個(gè)單線程的語(yǔ)言，而且其運(yùn)行機(jī)制比較特殊。
下面我們通過(guò)settimeout的幾個(gè)示例來(lái)展現(xiàn)javascript的運(yùn)行機(jī)制的特殊點(diǎn)

示例1

console.log(1);
setTimeout(function(){
    console.log(2);
},0);
console.log(3);
// 打印出 1 3 2

示例2

console.log("1");
setTimeout(function(){
    console.log("2");
},0);
while(1){}
// 打印出1，然后瀏覽器卡死，不會(huì)打印出2

javascript會(huì)先把需要運(yùn)行的內(nèi)容放到任務(wù)隊(duì)列中
但是如果遇到settimeout，會(huì)認(rèn)為這是個(gè)異步任務(wù)，會(huì)先放到異步隊(duì)列中
瀏覽器會(huì)先執(zhí)行同步任務(wù)，等到同步任務(wù)執(zhí)行完之后，再查看異步隊(duì)列
如果異步隊(duì)列中的任務(wù)的執(zhí)行時(shí)機(jī)到了，瀏覽器就會(huì)把任務(wù)放到同步隊(duì)列中去。

即：
異步任務(wù)一定在同步任務(wù)之后執(zhí)行。

示例3

for(var i = 0; i < 4; i++){
    setTimeout(function() {
        console.log(i);
    }, 1000);
}
// 打印 4 4 4 4

為什么打印出的是4 4 4 4呢？
因?yàn)闉g覽器會(huì)先執(zhí)行for循環(huán)
每執(zhí)行一次for循環(huán)，都把一個(gè)settimeout壓入異步隊(duì)列
1000毫秒之后，執(zhí)行settimeout里的方法的時(shí)候，i的值已經(jīng)是4了。

如果要打印0 1 2 3怎么辦呢？
利用閉包的特性，把i緩存到一個(gè)temp值里

for(var i = 0; i < 4; i++){
    (function(temp){
        setTimeout(function() {
            console.log(temp);
        }, 1000);
    })(i);
}
// 打印 0 1 2 3

這樣做等于是每一次for循環(huán)都新建了一個(gè)匿名函數(shù)，i的值被存入了這個(gè)匿名函數(shù)的內(nèi)存里。
理解了閉包的同學(xué)一定可以理解這一點(diǎn)。

示例4

我們知道ES6引入了新的關(guān)鍵字let
在這里，let有一個(gè)新的特性

for(let i = 0; i < 4; i ++){
    setTimeout(function(){
        console.log(i); 
    }, 1000);
}
// 打印 0 1 2 3

示例4與示例3只有var和let這個(gè)地方有區(qū)別，但是打印出來(lái)的結(jié)果卻完全不同
這是因?yàn)閘et是一個(gè)塊級(jí)作用域
let定義的i，對(duì)于每一個(gè)for循環(huán)的執(zhí)行來(lái)說(shuō)都是一個(gè)全新的i（使用不同的內(nèi)存地址）
所以打印的時(shí)候可以得到0 1 2 3