Event Loop(事件循环)

1.事件循环

javascript是一门单线程的语言，它的异步和多线程都是通过Event Loop实现的

2.js的执行上下文

执行上下文分为3种

全局执行上下文
函数执行上下文
eval函数创建的执行上下文

3.宏任务与微任务

宏任务：setTimeout/setInterval/setImmediate、 **Ajax、 DOM事件，**script (可以理解为外层同步代码)、UI rendering/UI事件、postMessage、MessageChannel、I/O（Node.js）

微任务：Promise.then，MutaionObserver，Object.observe（已废弃；Proxy 对象替代），process.nextTick（Node.js）

微任务的优先级 > 宏任务的

同步：

javascript 复制代码

function func1() {
  console.log(1)
}
function func2() {
  console.log(2)
  func1()
  console.log(3)
}
func2()

4.面试题：

4.1

异步：4,1,3,5,6,2

javascript 复制代码

var p = new Promise(resolve => {
  console.log(4)
  resolve(5)
})

function func1 () {
  console.log(1)
}

function func2() {
  setTimeout(() => {
    console.log(2)
  })
  func1()
  console.log(3)
  p.then(resolve => {
    console.log(resolve)
  }).then(() => {
    console.log(6)
  })
}
func2()

4.2

javascript 复制代码

async function async1 () {
    console.log('async1 start')
    await async2()
    console.log('async1 end')
}
async function async2 () {
    console.log('async2')
}
console.log('script start')
setTimeout(() => {
    console.log('timeout')
}, 0)
async1()
new Promise(resolve => {
    console.log('promise1')
    resolve()
}).then(() => {
    console.log('promise2')
})
console.log('script end')

4.3 DOM事件

通过用户点击按钮形式触发时，listener 1 ，1，listener 2,2

javascript 复制代码

<button id="button">按钮</button>

var btn = document.getElementById('button')
btn.addEventListener('click', () => {
  Promise.resolve().then(() => console.log(1))
  console.log('listener 1')
})
btn.addEventListener('click', () => {
  Promise.resolve().then(() => console.log(2))
  console.log('listener 2')
})

通过代码click()触发时：listener1 ,listener2 ,1,2

因为通过代码触发时，btn.click();触发的同步任务为两个lisener事件，执行listerner1后将promise.then的打印压入微任务中，再执行listener2同步任务

javascript 复制代码

var btn = document.getElementById('button')
btn.addEventListener('click', () => {
  Promise.resolve().then(() => console.log(1))
  console.log('listener 1')
})
btn.addEventListener('click', () => {
  Promise.resolve().then(() => console.log(2))
  console.log('listener 2')
})

btn.click();