事件循环队列（异步）、宏任务和微任务

1.定义

js是一门单线程执行的编程语言，同一个时间内只能做一件事情，

存在的问题：单线程执行任务队列会有什么问题

当前一个任务非常耗时，后续的任务就不得不一直等待，为了防止某个耗时任务导致程序假死的问题，异步代码由js委托给宿主环境（浏览器）执行，异步代码就是很耗时的代码。

js主线程代码是一行一行执行的，如果同步就一行一行执行，异步给浏览器，执行完，满足条件就交给任务队列进行排队，

异步一般都有回调函数，把回调函数放到任务队列里，主线程执行完，才去执行任务队列里的代码，所以遇到异步，就挂起，先不执行。

所以这里执行结果是 132

以上整体就是事件循环机制（队列） event loop

2.宏任务和微任务

事件循环由宏任务和在执行宏任务期间产生的所有微任务组成，完成当下的宏任务后，会立即执行在此期间入队的微任务

上一个宏任务执行完，才会考虑下一个宏任务

注意：

• js主线程遇到异步的内容，交给浏览器去等待，不会阻塞主线程

• 一定是满足条件后的任务，才会被添加到任务队列

1.宏任务

js的整体代码（主代码块）-整个script，setTimeout，setInterval，ajax请求.....都是宏任务

2.微任务

promise.then 和catch , async/await，

微任务是当前宏任务执行完，在下一个宏任务开始之前需要执行的任务

案例1-执行结果

1 定时器2-延时0 3 定时器 4-延时1000 5

猜测：13524？对的

   // event loop
    console.log(1)
    setTimeout(function(){
        console.log(2)
    },0)
    console.log(3)
    setTimeout(function(){
        console.log(4)
    },1000)
    console.log(5)  //13524

若为，10，异步定义100，输出为10？为什么，因为先主线程输出10，主线程空才去执行异步里的东西 

let num=10
    setTimeout(function(){
        num=100
    },0)
    console.log(num)    //10

案例2

axios 和 then setTimeout ，

先宏任务，宏任务的里微任务，.then，然后再去执行定时器，

结果：所以就会输出两个，一个是data，一个是延时器

  axios({
        url:"http://www.liulongbin.top:3009/api/news"
    })
    .then(res=>{
        console.log(res.data)
    })
​
    setTimeout(()=>{
        console.log("延时器代码")
    },1000)
​

​

案例3

案例 2 的内容 1 定时器2 promise.then 1000 3

axios放入浏览器-异步，定时器-浏览器-异步，1是主线程-输出，定时器-浏览器，promise微任务-等待，3-主线程-输出，然后去执行promise微任务，然后再去执行任务队列里的异步：0延时的定时器，然后是axios，然后是1秒的延时器

promise不是异步，是微任务，是宏任务完成之后紧接着执行的

所以先同步，然后是微任务，然后才是宏任务，

结果：1 3 1000 2 object 延时器代码

 axios({
        url:"http://www.liulongbin.top:3009/api/news"
    })
    .then(res=>{
        console.log(res.data)
    })

    setTimeout(()=>{
        console.log("延时器代码")
    },1000)

    console.log(1)

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

    const p=new Promise((resolve,reject)=>{
        resolve(1000)
    })
    .then(data=>{
        console.log(data)
    })

    console.log(3)
    // 1  3 promsie-1000  

案例4

100 定时器200 定时器222 promise.then300 400

结果：先是同步的100 400 然后300 200 222

微任务的执行时机要比宏任务早，所以同步完成之后，先是300，才是200和222,

   console.log(100)
    setTimeout(()=>{
        console.log(200)
    })
    setTimeout(()=>{
        console.log(222)
    })
    Promise.resolve().then(()=>{
        console.log(300)
    })
    console.log(400)
​
//100   400   300   200   222

案例5

1 定时器里2 包含promise 和then promise 5.then6 定时器里7 包含promise 和then 9

结果：1 5-虽然在微任务里写着，但是是同步的，所以也先执行 10 然后是微任务 所以是6 2 然后看2的宏任务有没有微任务 所以是3 然后2的第2个微任务 4 7 8 9

主线程的微任务先执行，然后是其他各个宏任务的微任务在执行完当前宏任务后，再执行本宏任务的微任务

1 5 10 6 2 3 4 7 8 9

console.log(1)   //1

    setTimeout(function(){
    console.log(2)  //5
    new Promise(function(resolve){
        console.log(3)  //6
        resolve()
    })
    .then(function(){
        console.log(4)  //7
    })
    })

    new Promise(function(resolve){
    console.log(5)//2
    resolve()
    })
    .then(function(){
    console.log(6)   //4
    })


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

    console.log(10)  //3