JS:异步和事件循环练习题1(*****五颗星)

1.第1题:

<script>
  const promise = new Promise((resolve, reject) => {
	console.log(1);
	console.log(2);
  });
  promise.then(() => {
	console.log(3);
  });
  console.log(4);

  // 结果:1 2 4
</script>

promise.then 是微任务,它会在所有的宏任务执行完之后才会执行,同时需要promise内部的状态发生变化,因为这里内部没有发生变化,一直处于pending状态,所以不输出3。

2.第2题:

<script>
        const promise1 = new Promise((resolve, reject) => {
            console.log('promise1')
            resolve('resolve1')
        })
        const promise2 = promise1.then(res => {
            console.log(res)
        })
        console.log('1', promise1);
        console.log('2', promise2);
    </script>

结果:

then方法会返回一个新的Promise实例

then方法是Promise.prototype下面的方法,即Promise.prototype.then()

代码执行过程如下:

  1. script是一个宏任务,按照顺序执行这些代码;
  2. 首先进入Promise,执行该构造函数中的代码,打印promise1;
  3. 碰到resolve函数, 将promise1的状态改变为resolved, 并将结果保存下来;
  4. 碰到promise1.then这个微任务,将它放入微任务队列;
  5. promise2是一个新的状态为pending的Promise;
  6. 执行同步代码1, 同时打印出promise1的状态是resolved;
  7. 执行同步代码2,同时打印出promise2的状态是pending;
  8. script宏任务执行完毕,查找微任务队列,发现promise1.then这个微任务且状态为resolved,执行它。

3.第3题:

<script>
        const promise = new Promise((resolve, reject) => {
            console.log(1);
            setTimeout(() => {
                console.log("timerStart");
                resolve("success");
                console.log("timerEnd");
            }, 0);
            console.log(2);
        });
        promise.then((res) => {
            console.log(res);
        });
        console.log(4);

        // 结果:1 2 4 timerStart timerEnd success
    </script>

代码执行过程:

  1. 首先遇到Promise构造函数,会先执行里面的内容,当作同步任务,打印1;
  2. 遇到定时器steTimeout,它是一个宏任务,放入宏任务队列;
  3. 继续向下执行,打印出2;
  4. 由于Promise的状态此时还是pending,所以promise.then先不执行;
  5. 继续执行下面的同步任务,打印出4;
  6. 此时微任务队列没有任务,继续执行下一轮宏任务,因为前一个宏任务是script,现在执行steTimeout;
  7. 首先执行timerStart,然后遇到了resolve,将promise的状态改为resolved且保存结果并将之前的promise.then推入微任务队列,再执行timerEnd;
  8. 执行完这个宏任务,就去执行微任务promise.then,打印出resolve的结果。

4.第4题:

<script>
        Promise.resolve().then(() => {
            console.log('promise1');
            const timer2 = setTimeout(() => {
                console.log('timer2')
            }, 0)
        });
        const timer1 = setTimeout(() => {
            console.log('timer1')
            Promise.resolve().then(() => {
                console.log('promise2')
            })
 

剩余60%内容,订阅专栏后可继续查看/也可单篇购买

前端面试题 文章被收录于专栏

前端面试的一些常问问题、问题的具体实现(可直接运行)以及底层原理

全部评论

相关推荐

评论
1
2
分享

创作者周榜

更多
牛客网
牛客网在线编程
牛客网题解
牛客企业服务