0%

806_js执行机制

<script>
      // js中用来存储待执行回调函数的队列中包含两个特定的队列
      // 宏队列:用来保存执行的宏任务,比如:定时器、DOM事件操作、ajax
      // 微队列:用来保存执行的微任务,比如:promise
      // js的执行顺序为:同步任务-微任务队列-宏任务队列
      setTimeout(() => {
        console.log(111);
      }, 0);

      new Promise((resolve, reject) => {
        //reject();
        resolve();
        console.log(222);
      }).then(v => {
        console.log(333);
      });
      console.log(444);
      //结果为2,4,3,1
    </script>
<script>
      // js中用来存储待执行回调函数的队列中包含两个特定的队列
      // 宏队列:用来保存执行的宏任务,比如:定时器、DOM事件操作、ajax
      // 微队列:用来保存执行的微任务,比如:promise
      // js的执行顺序为:同步任务-微任务队列-宏任务队列
      const first = () =>
        new Promise((resolve, reject) => {
          console.log(3);
          let p = new Promise((resolve, reject) => {
            console.log(7);
            setTimeout(() => {
              console.log(5);
              resolve(6);
              //定时器执行完成时p的状态和结果已经发生改变,所以resolve(6),不会改变p的状态和结果
            }, 0);
            resolve(1);
          });
          resolve(2);
          p.then(v => {
            console.log(v);
          });
        });
      first().then(v => {
        console.log(v);
      });
      console.log(4);

      //同:3 7 4
      //微:1 2
      //宏:5
    </script>
<script>
      setTimeout(() => {
        console.log(0);
      }, 0);

      new Promise((resolve, reject) => {
        console.log(1);
        resolve();
      })
        .then(() => {
          console.log(2);
          new Promise((resolve, reject) => {
            console.log(3);
            resolve();
          })
            .then(() => {
              console.log(4);
            })
            .then(() => {
              console.log(5);
            });
        })
        .then(() => {
          console.log(6);
        });

      new Promise((resolve, reject) => {
        console.log(7);
        resolve();
      }).then(() => {
        console.log(8);
      });

      //同:1 7
      //微:2 3 8 4 6 5
      //宏:0
    </script>