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();