js事件机制

概念：

event loop：

• Javascript是单线程的，所有的同步任务都会在主线程中执行。
• 主线程之外，还有一个任务队列。每当一个异步任务有结果了，就往任务队列里塞一个事件。
• 当主线程中的任务，都执行完之后，系统会 “依次” 读取任务队列里的事件。与之相对应的异步任务进入主线程，开始执行。
• 异步任务之间，会存在差异，所以它们执行的优先级也会有区别。大致分为 微任务（micro task，如：Promise、MutaionObserver等）和宏任务（macro task，如：setTimeout、setInterval、I/O等）。同一次事件循环中，微任务永远在宏任务之前执行。
  主线程会不断重复上面的步骤，直到执行完所有任务。

async/await ：

• async 函数，可以理解为是Generator 函数的语法糖。它建立在promise之上，总是与await一起使用的。
• await会返回一个Promise 对象，或者一个表达式的值。
• 其目的是为了让异步操作更优雅，能像同步一样地书写。

主要内容

1.事件执行

事件执行导图

过程解释：

1. 首先判断JS是同步还是异步,同步就进入主线程,异步就进入event table
2. 异步任务在event table中注册函数,当满足触发条件后,被推入event queue
3. 同步任务进入主线程后一直执行,直到主线程空闲时,才会去event queue中查看是否有可执行的异步任务,如果有就推入主线程中
   以上三步循环执行,这就是event loop
   举例：

console.log(1) 是同步任务,放入主线程里
setTimeout() 是异步任务,被放入event table, 0秒之后被推入event queue里
console.log(3 是同步任务,放到主线程里

当 1、 3在控制条被打印后,主线程去event queue(事件队列)里查看是否有可执行的函数,执行setTimeout里的函数

2. 微任务(Microtasks)、宏任务(task)

宏任务：包括整体代码script，setTimeout，setInterval、setImmediate。
微任务：原生Promise(有些实现的promise将then方法放到了宏任务中)、process.nextTick、Object.observe(已废弃)、 MutationObserver 记住就行了。

微任务、宏任务执行导图

1. 执行一个宏任务,过程中如果遇到微任务,就将其放到微任务的【事件队列】里
2. 当前宏任务执行完成后,会查看微任务的【事件队列】,并将里面全部的微任务依次执行完

举例：
例1：

setTimeout(()=>{
  console.log('setTimeout')
},0)
new Promise((resolve,reject)=>{
  console.log('Promise')
  resolve()
}).then(()=>{
  console.log('Then')    
})
 console.log('代码执行结束');

输出结果：Promise，代码执行结束, Then，setTimeout

解释：
首先执行script下的宏任务,遇到setTimeout,将其放到宏任务的【队列】里
遇到 new Promise直接执行, 打印"Promise"
遇到then方法,是微任务,将其放到微任务的【队列里】, 打印 "代码执行结束"
本轮宏任务执行完毕,查看本轮的微任务,发现有一个then方法里的函数, 打印"Then"
到此,本轮的event loop 全部完成。

下一轮的循环里,先执行一个宏任务,发现宏任务的【队列】里有一个 setTimeout里的函数,执行打印"setTimeout"
例3：

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

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

输出结果是Promise1，setTimeout1，Promise2，setTimeout2
例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，6，8，2，4，3，5，9，11，10，12。