js事件循环

139 阅读3分钟

js代码执行顺序你真的知道吗?

js是单线程的,基于事件循环,非阻塞IO的。也就是说一次只能做一件事,那么不可避免的就会造成阻塞,幸运的是js中有异步的概念,也就解决了js阻塞的问题。

js中的任务分为同步任务和异步任务。

同步任务:在主线程上排队执行的任务,只有前一个任务执行完毕,才能执行后一个任务。

异步任务:是指不进入主线程,而进入"任务队列"的任务,只有"任务队列"通知主线程,某个异步任务可以执行了,该任务才会进入主线程执行。

 主线程的所有同步任务全部执行完毕之后,才会执行任务队列中的异步任务。

任务队列又分为 宏任务队列 和 微任务队列。

宏任务包括:setTimeout,setinterval,setImmediate(node独有),requestAnimationFrame(浏览器独有),UI rendering(浏览器独有),I/O

  • 执行全局Script同步代码,这些同步代码有一些是同步语句,有一些是异步语句(比如setTimeout等);
  • 全局Script代码执行完毕后,执行栈Stack会清空;
  • 从微队列中取出位于队首的回调任务,放入执行栈Stack中执行,执行完后微队列长度减1;
  • 继续循环取出位于微队列的任务,放入执行栈Stack中执行,以此类推,直到直到把微任务执行完毕。注意,如果在执行微任务的过程中,又产生了微任务,那么会加入到微队列的末尾,也会在这个周期被调用执行;
  • 微队列中的所有微任务都执行完毕,此时微队列为空队列,执行栈Stack也为空;
  • 取出宏队列中的任务,放入执行栈Stack中执行;
  • 执行完毕后,执行栈Stack为空;
  • 重复第3-7个步骤;

直接上题:

function fn(){
    console.log(1);
    
    setTimeout(() => {
        console.log(2);
        Promise.resolve().then(() => {
            console.log(3);
        });
    },0);
    
    new Promise((resolve, reject) => {
        console.log(4);
        resolve(5);
    }).then(data => {
        console.log(data);
    });
    
    setTimeout(() => {
        console.log(6);
    },0);
    
    console.log(7);
}
fn(); 
 
/** 附上 详细的代码执行过程:
1. 首先自上而下执行代码,得到此时的 
    stack: [console.log(1), new Promise(), console.log(7)];
    macrotask: [setTimeout1, setTimeout2]
    microtask: [promise2.then]
    此时的输出为:1, 4, 7
2. 到此全部的同步任务执行完毕,调用栈清空;
    stack: [];
    macrotask: [setTimeout1, setTimeout2]
    microtask: [promise2.then]
3. 将微任务压入执行栈,执行
    stack: [promise2.then];
    macrotask: [setTimeout1, setTimeout2]
    microtask: []
    输出 5
4. 此时,微任务队列中为空,故此开始执行宏任务,将宏任务队列中的setTimeout1压入执行栈;
    stack: [setTimeout1];
    macrotask: [setTimeout2]
    microtask: []
    输出 2,
    在执行setTimeout1时 又创建了一个微任务,放入microtask中
    stack: []
    macrotask: [setTimeout2]
    microtask: [promise1.then]
5. 将新创建的微任务压入执行栈执行
    stack: [promise1.then]
    macrotask: [setTimeout2]
    microtask: []
    输出:3
6. 到此,微任务执行完毕,开始执行宏任务
    stack: [setTimeout2]
    macrotask: []
    microtask: []
    输出:3
7. 最后,执行栈和任务队列全部为空,代码执行完毕。
    最终输出顺序为:1 4 7 5 2 3 6
 
完美!!!
**/