事件循环输出题

343 阅读1分钟
    console.log('script start');

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

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

    console.log('script end');
    // script start   script end   promise1   promise2  setTimeout
    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)

    requestAnimationFrame(function () {
      console.log('requestAnimationFrame')
    })

    async1();

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

    // 我的答案
    // script start
    // async1 start
    // async2
    // async1 end
    // promise1
    // promise2
    // setTimeout
    // requestAnimationFrame

    // 标准答案
    // script start
    // async1 start
    // async2
    // promise1
    // async1 end
    // promise2
    // setTimeout
    // requestAnimationFrame
    async function f1() {
      return new Promise((resolve) => {
        console.log(4)
        resolve()
      }).then(() => {
        console.log(5)
      })
    }


    async function run() {
      console.log(1)
      new Promise((resolve) => {
        console.log(2)
        resolve()
      }).then(() => {
        console.log(3)
      })
      await f1()
      // 阻塞后面的代码
      setTimeout(() => {
        console.log(6)
      }, 0)
      console.log(7)
    }

    run()

    // 我的答案
    // 1
    // 2
    // 4
    // 5
    // 7
    // 3
    // 6

    // 标准答案
    // 1
    // 2
    // 4
    // 3
    // 5
    // 7
    // 6
    function test() {
      console.log('start')

      setTimeout(() => {
        console.log('children2')
        Promise.resolve().then(() => { console.log('children2-1') })
      }, 0)

      setTimeout(() => {
        console.log('children3')
        Promise.resolve().then(() => { console.log('children3-1') })
      }, 0)

      Promise.resolve().then(() => { console.log('children1') })

      console.log('end')
    }

    test()
    // setTimeout 的执行方式和 async await 不同,setTimeout 是执行自己内部的好后再执行其他的,await 是组合在一起执行
    // start end children1 children2 children2-1 children3 children3-1
  • 1029 出题测试 两个 setTimeout 是同一级别,但是 setTimeout 里面再套 setTimeout 又是另外一个级别的了
    console.log(1);

    setTimeout(() => {
      console.log(2);
      setTimeout(() => {
        console.log(14);
        new Promise((resolve, reject) => {
          console.log(15);
          resolve()
        }).then(res => {
          console.log(16);
        })
      })
      new Promise((resolve, reject) => {
        console.log(3);
        resolve()
      }).then(res => {
        console.log(4);
      })
    })

    new Promise((resolve, reject) => {
      resolve()
    }).then(res => {
      console.log(5);
    }).then(res => {
      console.log(6);

    })

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

    })

    setTimeout(() => {
      console.log(10);
      new Promise((resolve, reject) => {
        console.log(11);
        resolve()
      }).then(res => {
        console.log(12);
      })
    })

    console.log(13);