同步与异步

异步和同步

1.js介绍

javascript是一门单线程语言，所以javascript是按语句的执行顺序执行的。
虽然js是单线程，但是我们可以将任务分成两类：
1.同步任务：需要执行的任务在主线程上排队，一次执行
2.异步任务：没有立马执行但是需要被执行的任务，放在任务队列里面

2.javascript事件循环

1.所有同步任务偶在主线程上执行，形成一个很执行栈
2.主线程之外，还存在一个任务队列（task queue）只要异步任务有了运行结果，就在“任务队列”之中放置一个事件。
3.一旦“执行栈”中的所有同步任务执行完毕，系统就会读取“任务队列”，看看里面有哪些事件。那些对应的异步任务，就结束等待状态，进入执行栈开始被执行。
4.主线程不断重复以上三步。
5.同步和异步分别进入到不同的执行场所，同步进入到主线程，异步的进入到event table 并注册函数
6.当指定事件完成之后，event table 会将函数移入到event queue
7.当主线程的任务执行完毕之后，会把event queue里面读取对应的函数进入主线程执行
上述过程会不断循环，形成event loop(事件循环)

3.宏任务与微任务

除了广义的同步任务和异步任务，我们可以分的更加精细一点：

macro-task(宏任务)：包括整体代码script，setTimeout，setInterval

micro-task(微任务)：Promise，process.nextTick
不同的任务会进入到不同的event queue。比如setTimeout和setInterval会进入相同的Event Queue。

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,6,8,2,4,3,5,9,11,10,12

1. 首先先执行console.log(1) 然后将setTimeout放到宏任务event queue里面 记作 setTimeout 1，接着 看到 process.nextTick ，将其放到微任务里面 ，记作 process 1，然后 看到new promise立即执行输出9 ，将里面的then 放到 微任务里面 记作 then 2, 继续，遇到 setTimeout 放到宏任务里面记作 setTimeout 2 。目前输出的是：1,7，
2. OK, 接下来，开始判断是否有微任务，刚刚放入到微任务event queue的进入到主程序开始执行，process 1 ， then2 目前输出的是：6,8、
3. 接下来，微任务的event queue 空了，进行下一轮事件，将刚刚放到宏任务的 setTimeout 1 进入到主线程遇到 console 立即执行， 遇到 process.nextTick 放到微任务 event queue 里面 记作 process1， 接着遇到 new Promise 立即执行， 将 then 放到event queue 里面 记作 then2，OK，当前宏任务里的任务执行完了，判断是否有微任务，发现有 process1， then 2 两个微任务 ， 一次执行目前输出的是：2,4,3,5、
4. 目前主线程里的任务都执行结束了,又开始第三轮事件循环，同上（字太多，省略。。。。） 目前输出的是：9,11,10,12、

注意: 以上所说只能是在浏览器中的执行顺序，