JavaScript运行机制.md

• 常见的一些宏任务（主线程）和微任务（异步任务）

macrotask 宏任务	microtask微任务
setTimeout	process.nextTick
setInterval	Promises
setImmediate	Object.observe
requestAnimationFrame	-
I/O	-
UI rendering	-

JS运行机制

• 循环宏任务的情况下， 每当当前轮宏任务执行完成询问任务队列是否存在任务， 存在执行， 不存在执行下一轮宏任务
  
• ES6—async + await
  async 的函数返回的都是 一个promise对象，也就是说，它会等待你在await的任务完成之后再继续宏任务

async function test() {
    await new Promise((res) => {
        console.log(1);
        res('成功');
    }).then(() => {
        console.log(2);
    })
    console.log(3);
}
test(); //1->2->3

JS运行机制练习题

题1

function test() {
    console.log(1);
    setTimeout(() => {
        console.log(2); //遇见setTimeout 放入下一轮宏任务循环中
    }, 1);
    [3, 4, 5].forEach((ele) => {
        new Promise(res => {
            res(ele);
        }).then(res => {
            console.log(res); //遇见.then(fn)放入异步线程执行
        })
   })
 }
 test(); //1->3,4,5->2

题2

function test() {
    console.log(1);
    setTimeout(() => {
        console.log(2); //遇见setTimeout 放入下一轮宏任务循环中
    }, 1);
    setTimeout(() => {
        console.log(55);
        [3, 4, 5].forEach((ele) => {
            new Promise((res) => {
                console.log(99);
                res(ele);
            }).then((res) => {
                console.log(res); //遇见.then(fn)放入异步线程执行
           });
       });
    }, 0);
   }
test(); //1->2->55->99,99,99->3,4,5

题3

async function test() {
    console.log(1);
    setTimeout(() => {
       console.log(2);
    }, 1);
    setTimeout(() => {
        console.log(666);
        [3, 4, 5].forEach((ele) => {
            new Promise((res) => {
                res(ele);
            }).then((res) => {
                console.log(res);
            });
       });
       console.log(6);
    }, 0);
    await new Promise((res) => {
        res(7);
    }).then((res) => {
        console.log(res);
    });
}
test(); //1->7->2->666->6->3,4,5

题4

console.log("1");
setTimeout(function() {
    console.log("2");
    process.nextTick(function() {
        console.log("3");
    });
    new Promise(function(resolve) {
        console.log("4");
        resolve();
    }).then(function() {
        console.log("5");
    });
});

process.nextTick(function() {
    console.log("6");
});

new Promise(function(resolve) {
    console.log("7");
    resolve();
}).then(function() {
    console.log("8");
});

setTimeout(function() {
    console.log("9");
    process.nextTick(function() {
        console.log("10");
    });
    new Promise(function(resolve) {
        console.log("11");
        resolve();
    }).then(function() {
        console.log("12");
    });
});
//同步任务  1-> 7
//微任务① nextTick  6-> ②then  8
//宏任务① setTimeout()  2-> 4->3->5

//宏任务② setTimeout() 9->11->10->12
//第一轮  1->7->6->8

题5

Promise.resolve().then(() => {
    console.log('1')
    setTimeout(() => {
        console.log('2')
    }, 0)
})

setTimeout(() => {
    console.log('3')
    Promise.resolve().then(() => {
        console.log('4')
    })
}, 0)

//1->3->2->4

题6

console.log(1)
setTimeout(function() {
    console.log(2);
    let promise = new Promise(function(resolve, reject) {
        console.log(7);
        resolve()
    }).then(function() {
        console.log(8)
    });
}, 1000);

setTimeout(function() {
    console.log(10);
    let promise = new Promise(function(resolve, reject) {
        console.log(11);
        resolve()
    }).then(function() {
        console.log(12)
    });
}, 0);

let promise = new Promise(function(resolve, reject) {
    console.log(3);
    resolve()
}).then(function() {
    console.log(4)
}).then(function() {
    console.log(9)
});

console.log(5)

//主线程任务 1->3->5
//宏任务① setTimeout 2->7->8
//宏任务② setTimeout 10->11->12
//微任务 promise  4->9
//第一轮 1->3->5->4->9
//第二轮 10->11->12
//第三轮 2->7->8

题7

console.log("AAAA"); //①
setTimeout(() => console.log("BBBB"), 1000); //⑥
const start = new Date();
while (new Date() - start < 3000) {}

console.log("CCCC"); //②
setTimeout(() => console.log("DDDD"), 0); //⑦
new Promise((resolve, reject) => {
        console.log("EEEE"); //③
        foo.bar(100);
    })
    .then(() => console.log("FFFF"))
    .then(() => console.log("GGGG"))
    .catch(() => console.log("HHHH")); //⑤
console.log("IIII"); //④

setTimeout(function() {
    console.log('setTimeout'); //⑧
})
//AAAA  CCCC  EEEE  IIII  HHHH BBBB DDDD  setTimeout

题8

async function async1() {
    console.log("AAAA"); //②
    async2();
    console.log("BBBB"); //④
}
async function async2() {
    console.log("CCCC"); //③
}
console.log("DDDD"); //①
setTimeout(function() {
    console.log("FFFF"); //⑧
}, 0);
async1();
new Promise(function(resolve) {
    console.log("GGGG"); //⑤
    resolve();

}).then(function() {
    console.log("HHHH"); //⑦

});
console.log("IIII"); //⑥

//这道题的坑就在于 async中如果没有await，那么它就是一个纯同步函数
//DDDD AAAA CCCC BBBB  GGGG IIII HHHH FFFF

题9

console.log('start'); //①第一轮整体代码
setTimeout(() => {
    console.log('children2'); //③第二轮宏任务
    Promise.resolve().then(() => {
        console.log('children3'); //④微任务
    })
}, 0); //宏任务
new Promise((resolve, reject) => {
    console.log('children4'); //②第一轮整体代码
    setTimeout(() => {
        console.log('children5'); //⑤第三轮宏任务
        resolve('children6') //执行微任务
    }, 0); //宏任务
}).then((res) => { //.then要有resolve才会执行，resolve在setTimeout里暂不执行
    console.log('children7');
    setTimeout(() => {
        console.log('res');
    }, 0)

});
//start children4 children2 children3 children5 children7 children6

题10

• promise的.then（）要有resolve（）才会执行

const p = function() {
    return new Promise((resolve, reject) => {
        const p1 = new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve(1)
            }, 0);
            resolve(2) //resolve2会比resolve1先执行resolve1延迟执行，2执行完1就没了因为promise状态已改变
        })
        p1.then((res) => {
            console.log(res) //③微任务
        })
        console.log(3); //①第一轮整体代码
        resolve(4) //④微任务
    })
}
p().then((res) => {
    console.log(res);
})
console.log('end'); //②第一轮整体代码
//3 end 2 4

博文参考1
博文参考2
JavaScript 运行机制详解：再谈Event Loop
异步讲解