js事件循环机制习题，微任务与宏任务的执行循序。

不涉及微任务与宏任务的事件循环机制

js是单线程执行的，页面加载时，会自上而下执行主线程上的同步任务，当主线程代码执行完毕时，才开始执行在任务队列中的异步任务。具体如下
1.所有同步任务都在主线程上执行，形成一个执行栈。
2.主线程之外，还存在一个"任务队列(eventloop队列或者消息队列)“。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件。
3.一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列”，看看里面有哪些事件。哪些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。
4.主线程不断重复上面的第三步。

宏任务与微任务，在事件循环机制中是如何执行的？

1、代码：分为【宏任务】与【微任务代码】
【宏任务】：包括主代码块、定时器代码、dom节点事件触发代码、ajax代码 ；（主代码块： script标签包着这些代码）
【微任务】 promise实例对象的.then(回调函数)
2、宏任务与微任务都会去【宿主环境】。
3、这些代码里面回调函数到了要执行点的时候，不是直接去【主线程】,而是去【任务队列】。【任务队列】又被分为两个队列【宏任务队列】与【微任务队列】
4、最一开始【事件循环机制】先执行 【主代码块】，又会分为：
异步代码：在执行的过程中又分出来【宏任务】与【微任务】到【宿主环境】，然后各自排队到任务队列里的【宏任务队列】与【微任务队列】
同步代码：分到主线程上，就继续执行。
5、执行完第一个主代码里面同步代码后，【事件循环机制】会先把【微任务队列】里面所有函数执行完成后，才去执行【宏任务队列】的下一个的函数。

简叙：任务队列里执行函数【微任务队列】比【宏任务队列】优先。

宏任务与微任务习题

例题一：

<script>
    console.log(1);
    setTimeout(() => {
        console.log(2);
    }, 0)
    console.log(3);
</script>
<script>
    console.log(4);
    setTimeout(() => {
        console.log(5);
    }, 0)
    console.log(6);
</script>

例题二：

 console.log(1)

  setTimeout(function() {
    console.log(2)
  }, 0)

  const p = new Promise((resolve, reject) => {
    console.log(3)
    resolve(1000) // 标记为成功
    console.log(4)
  })

  p.then(data => {
    console.log(data)
  })

  console.log(5)

例题三：

new Promise((resolve, reject) => {
    resolve(1)

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

  }).then(data => {
    console.log(data)
  })

  console.log(3)

例题四：

setTimeout(() => {
  console.log(1)
}, 0)
new Promise((resolve, reject) => {
  console.log(2)
  resolve('p1')

  new Promise((resolve, reject) => {
    console.log(3)
    setTimeout(() => {
      resolve('setTimeout2')
      console.log(4)
    }, 0)
    resolve('p2')
  }).then(data => {
    console.log(data)
  })

  setTimeout(() => {
    resolve('setTimeout1')
    console.log(5)
  }, 0)
}).then(data => {
  console.log(data)
})
console.log(6)

例题五：

<script>
    console.log(1);
    async function fnOne() {
      console.log(2);
      await fnTwo(); // 右结合先执行右侧的代码, 然后等待
      console.log(3);
    }
    async function fnTwo() {
      console.log(4);
    }
    fnOne();
    setTimeout(() => {
      console.log(5);
    }, 2000);
    let p = new Promise((resolve, reject) => { // new Promise()里的函数体会马上执行所有代码
      console.log(6);
      resolve();
      console.log(7);
    })
    setTimeout(() => {
      console.log(8)
    }, 0)
    p.then(() => {
      console.log(9);
    })
    console.log(10);
  </script>
 <script>
    console.log(11);
    setTimeout(() => {
      console.log(12);
      let p = new Promise((resolve) => {
        resolve(13);
      })
      p.then(res => {
        console.log(res);
      })
      console.log(15);
    }, 0)
    console.log(14);
  </script>

例题六：今日头条面试题

async function async1 () {
    console.log('async1 start');
    await async2();
    console.log('async1 end');
}

async function async2 () {
    console.log('async2');
}

console.log('script start');

setTimeout(function () {
    console.log('setTimeout');
}, 0);

async1();

new Promise(function (resolve) {
    console.log('promise1');
    resolve();
}).then(function () {
    console.log('promise2');
});

console.log('script end');

例题七：if条件下

<script>
  function async2 () {
    console.log('async2');
  }
  console.log('script start');
  async function fn(){
    if(true){
      await async2();
      console.log('zx----------',3)
    }
    if(true){
      console.log('zx----------',4)
    }
    console.log('zx----------',55)

  }
  fn()

  console.log('script end');

</script>