EventLoop事件循环

JavaScript 是一门单线程执行的脚本语言。也就是说，同一时间只能做一件事情。

javaScript要运行在宿主环境中（浏览器，nodejs）下。浏览器内部有执行js代码的引擎(V8引擎)

任务是以事件及其回调的方式存在的。

当事件（用户的点击，图片的成功加载）发生时，将其回调添加到任务队列；主线程上的任务完成之后，就会从任务队列中取出任务来执行，此过程不断重复从而形成一个循环，称为eventLoop。

异步代码的执行过程

<script>
	console.log(1)
  setTimeout(()=>{
    console.log(2)
  }, 2000)
  console.log(3)
  </script>

先执行同步代码，并输出结果；

遇到异步代码之后，交由浏览器（宿主环境）处理 ===> 事件触发之后进入到任务队列

继续执行后续代码；

主线程空闲时，从任务队列中取出任务继续执行；

setTimeout要等空闲才执行

console.log(1);
setTimeout(()=>{console.log(2)}, 1000);

const t = Date.now() + 5*1000
while(Date.now() < t){
    // console.log(Date.now())
}

异步任务

不是马上执行，是放入到队列中等待；

如果所有的任务都要按序等待，那么也不行，需要有一个能插队的机制。所以又将异步任务分为微任务和宏任务，同时对应微任务队列和宏任务队列。

当主线程空闲时，先执行微任务队列中的任务，再去执行宏任务队列中的任务。

微任务队列和宏任务队列

微任务代码

Promise对象.then()

宏任务代码

script
dom事件
ajax
setTimout

示例

阅读如下代码执行结果

console.log(1);

setTimeout(() => {
    console.log(2);
}, 0)

let p = new Promise((resolve, reject) => {
    resolve(3)
})

p.then(res => {
    console.log(res);
})


console.log(4);

画图

示例

阅读如下代码回答结果

console.log(1)
setTimeout(function() {
  console.log(2)
  new Promise(function(resolve) {
    console.log(3)
    resolve()
  }).then(function() {
    console.log(4)
  })
})

new Promise(function(resolve) {
  console.log(5)
  resolve()
}).then(function() {
  console.log(6)
})
setTimeout(function() {
  console.log(7)
  new Promise(function(resolve) {
    console.log(8)
    resolve()
  }).then(function() {
    console.log(9)
  })
})
console.log(10)

微任务和宏任务以及同步代码是如何执行的?

先执行第一个宏任务, 然后同步任务, 然后微任务, 然后下一个宏任务如此循环, 直到所有代码执行完毕