javaScript零散知识点

js事件循环

async function async1() {
    console.log('async1 start');
    await async2();
    console.log('async1 end');
}
async function async2() {
    console.log('async2');
}

console.log('script start');

setTimeout(function() {
    console.log('setTimeout');
}, 0)

async1();

new Promise(function(resolve) {
    console.log('promise1');
    resolve();
}).then(function() {
    console.log('promise2');
});
console.log('script end');

// 以下为正确的输出顺序
script start
async1 start
async2
promise1
script end
async1 end
promise2
setTimeout
           

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

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

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

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

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

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

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

为任务包括：process.nextTick (Node独有），Promise，Object.observe，MutationObserver

那么完成的事件循环如下：

1. 执行全局Script同步代码，这些同步代码有一些是同步语句，有一些是异步语句（比如setTimeout等）；
2. 全局Script代码执行完毕后，

   执行栈

   Stack会清空；
3. 从

   微队列

   中取出位于队首的回调任务，放入

   执行栈

   Stack中执行，执行完后

   微队列

   长度减1；
4. 继续循环取出位于

   微队列

   的任务，放入

   执行栈

   Stack中执行，以此类推，直到直到把

   微任务

   执行完毕。注意，如果在执行

   微任务

   的过程中，又产生了

   微任务

   ，那么会加入到

   微队列

   的末尾，也会在这个周期被调用执行；

5. 微队列

   中的所有

   微任务

   都执行完毕，此时

   微队列

   为空队列，

   执行栈

   Stack也为空；
6. 取出

   宏队列

   中的任务，放入

   执行栈

   Stack中执行；
7. 执行完毕后，

   执行栈

   Stack为空；
8. 重复第3-7个步骤；

本文参考：js执行顺序

上题

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

完美！！！
           

function fn(){
    console.log(1);
    
    setTimeout(() => {
        console.log(2);
        Promise.resolve().then(() => {
            console.log(3)
        });
    });
    
    new Promise((resolve, reject) => {
        console.log(4)
        resolve(5)
    }).then((data) => {
        console.log(data);
        
        Promise.resolve().then(() => {
            console.log(6)
        }).then(() => {
            console.log(7)
            
            setTimeout(() => {
                console.log(8)
            }, 0);
        });
    })
    
    setTimeout(() => {
        console.log(9);
    })
    
    console.log(10);
}
fn();