【宏任务和微任务执行顺序】talking to the moon~放不下的任务~是不是会担心？变成一只野兽！

💕💕💕#今天是容易混淆之同步和异步任务顺序#💕💕💕
看下面之前，先整体了解一下任务的执行顺序吧：

1.执行同步代码
2.执行栈为空，查询是否有微任务需要执行
3.执行所有微任务
4.当所有微任务执行完毕后，查询是否有宏任务需要执行
5.执行所有宏任务
6.重复第 2-5 步

注意：for循环默认是同步任务，setTimeout是宏任务，Promise是微任务

1…通过文件依赖了解任务排序：

<script type="module">
  function load(src, callback) {
    let script = document.createElement('script');
    script.src = src;
    script.type = 'module'; // 确保加载的脚本是模块（这里有两个外部.js文件，进行模块化，在此不多赘述）
    script.onload = callback; // 当脚本加载完成时调用回调函数
    document.body.append(script);
  }

  // 按顺序加载两个.js文件：
  load('./script1.js', function () {
    console.log('script1 loaded');
    load('./script2.js', function () {
      console.log('script2 loaded');
    });
    //使用嵌套回调的方式确保 script2.js 在 script1.js 加载完成后再加载。
  });
  console.log(33);

  //从以上可以看出，执行顺序是：先执行同步代码，然后执行script1.js，再执行script2.js  

2.Promise的微任务处理机制：

  console.log('Start');

  const promise = new Promise((resolve, reject) => {
    // resolve('操作成功');
    reject('操作失败');//显示哪个都可以，显示哪个，then中使用对应的那个
    //then中第一个参数是成功的回调，第二个参数是失败的回调
  }).then((victor) => {
    console.log('接受业务处理');
  }, (error) => {
    console.log('拒绝业务处理'); 
  });

  console.log('End');

输出：33 -> start -> end -> 接受业务处理 -> script1 loaded -> script2 loaded

注意：同步代码>Promise>函数回调（如上述中onload）>setTimeout

如果有疑问，请看下面的解释：

执行顺序：
1.同步代码：

load(‘./script1.js’, …) 被调用，创建了 < script > 元素并开始加载 script1.js。
console.log(33) 输出 33。
console.log(‘Start’) 输出 Start。
console.log(‘End’) 输出 End。

2.微任务（Promise）：

Promise.then 的回调被放入微任务队列。
输出 ‘接受业务处理’。

3.宏任务（onload 回调）：

当 script1.js 加载完成时，触发 onload 回调，输出 script1 loaded。
然后开始加载 script2.js。
当 script2.js 加载完成时，触发 onload 回调，输出 script2 loaded。

3.进一步了解同步任务和异步任务的执行顺序：

new Promise((resolve) => {
   resolve();//resolve是异步的，有了resolve，才会把then中的函数放入微任务队列，等vip用户走完之后再执行微任务队列
   console.log('Promise');//这个函数中的代码是同步的（不是回调函数）
 }).then(value => {
   console.log('成功');//这个函数中的代码是异步的（（）
 });
 console.log('faithful');//Promise -> faithful -> 拒绝业务处理（相当于再微任务队列的前排） ->  成功（在微任务队列的末尾）

4.宏任务提升是误解：

  let promise1 = new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve();
      console.log('Promise1');
    }, 0);
    console.log('Promise2');//同步任务
  }).then(value => {
    console.log('陈公公');
  });
  //输出：Promise2>Promise1>陈公公

对上述输出的详解：

 1. 将setTimeout 放进宏任务队列中。
 2.当同步任务执行完毕后，执行宏任务队列中的任务，进入setTimeout。
 3.此时已经将setTimeout放入主线程，输出Promise1，将resolve放入微任务队列。
 4.执行完setTimeout后，执行微任务队列中的任务。

注意：这里先宏再微是因为微在宏里面包着。

煲仔们，明天又是周五啦~ 期待中~❤️❤️❤️