JS事件循环 根据代码推出运行结果

已于 2024-07-21 10:46:48 修改
阅读量295 收藏 2
点赞数 9
文章标签： javascript 前端
于 2024-07-21 03:17:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42801391/article/details/140580906
版权

  案例一：

   求下面代码的运行输出结果

new Promise((res) => {
  setTimeout(() => {
    console.log(1);
    res()
  }, 0);
  console.log(2);
}).then(() => {
  console.log(3);
})
console.log(4);

  第一步，先将代码全部注释：

// new Promise((res) => {
//   setTimeout(() => {
//     console.log(1);
//     res()
//   }, 0);
//   console.log(2);
// }).then(() => {
//   console.log(3);
// })
// console.log(4);

  从上到下，依次执行代码。

  new Promise是同步任务，立即执行：

new Promise((res) => {
//   setTimeout(() => { 
//     console.log(1);
//     res()
//   }, 0);
//   console.log(2);
})
// .then(() => {
//   console.log(3);
// })
// console.log(4);

  setTimeout是宏任务，放入宏任务队列

new Promise((res) => {
//   setTimeout(() => {   //宏任务1
//     console.log(1);
//     res()
//   }, 0);
//  console.log(2);
})
// .then(() => {
//   console.log(3);
// })
// console.log(4);

//宏:1

  console.log(2)是同步任务，立即执行

new Promise((res) => {
//   setTimeout(() => {   //宏任务1
//     console.log(1);
//     res()
//   }, 0);
  console.log(2);         //执行,输出2
})
// .then(() => {
//   console.log(3);
// })
// console.log(4);

//宏:1
//输出:2

  console.log(4)是同步任务，执行

new Promise((res) => {
//   setTimeout(() => {   //宏任务1
//     console.log(1);
//     res()
//   }, 0);
  console.log(2);         //执行,输出2
})
// .then(() => {
//   console.log(3);
// })
console.log(4);

//宏:1
//输出:2 4

  扫描完毕，所有同步任务都执行完成，现在先查看微任务队列是否有任务。此时没有，则看宏任务队列是否有任务，有一个“1”，执行宏任务1。 

new Promise((res) => {
  setTimeout(() => {   //宏任务1
//     console.log(1);
//     res()
  }, 0);
  console.log(2);     //执行,输出2
})
// .then(() => {
//   console.log(3);
// })
console.log(4);

//宏:
//输出:2 4

  console.log(1) 是同步任务，执行

new Promise((res) => {
  setTimeout(() => {   //宏任务1
    console.log(1);    //执行,输出1
//     res()
  }, 0);
  console.log(2);      //执行,输出2
})
// .then(() => {
//   console.log(3);
// })
console.log(4);

//宏:
//输出:2 4 1

  res()是同步任务，执行。此函数执行后，promise的then钩子函数被激活，但是它是个微任务。

new Promise((res) => {
  setTimeout(() => {   //宏任务1
    console.log(1);    //执行,输出1
    res()              //执行,释放微任务1
  }, 0);
  console.log(2);      //执行,输出2
})
// .then(() => {       //微任务1
//   console.log(3);
// })
console.log(4);

//宏:
//微:1
//输出:2 4 1

  同步任务执行完毕，执行微任务1

new Promise((res) => {
  setTimeout(() => {   //宏任务1
    console.log(1);    //执行,输出1
    res()              //执行,释放微任务1
  }, 0);
  console.log(2);      //执行,输出2
})
.then(() => {          //微任务1
//   console.log(3);
})
console.log(4);

//宏:
//微:
//输出:2 4 1

  console.log(3)是同步任务，执行

new Promise((res) => {
  setTimeout(() => {   //宏任务1
    console.log(1);    //执行,输出1
    res()              //执行,释放微任务1
  }, 0);
  console.log(2);      //执行,输出2
})
.then(() => {          //微任务1
  console.log(3);      //执行,输出3
})
console.log(4);

//宏:
//微:
//输出:2 4 1 3

  输出结果：2 4 13 

 案例二：

 下面是一个比较复杂的案例，求出代码运行的输出结果：

setTimeout(() => {
  console.log(1)
  setTimeout(() => {
    console.log(2)
  }, 0)
}, 0)
new Promise((res) => {
  new Promise((res) => {
    setTimeout(() => {
      console.log(3);
    })
    console.log(4);
    res()
  }).then(() => {
    console.log(5);
  })
  console.log(6)
  setTimeout(() => {
    console.log(7)
    setTimeout(() => {
      console.log(8)
      res()
    }, 0)
  }, 0)
}).then(() => {
  console.log(9)
  setTimeout(() => {
    console.log(10)
  }, 0)
  new Promise((res) => {
    console.log(11)
    res()
  }).then(() => {
    console.log(12)
  })
})
console.log(13)

  首先：注释所有代码

// setTimeout(() => {
//   console.log(1)
//   setTimeout(() => {
//     console.log(2)
//   }, 0)
// }, 0)
// new Promise((res) => {
//   new Promise((res) => {
//     setTimeout(() => {
//       console.log(3);
//     })
//     console.log(4);
//     res()
//   }).then(() => {
//     console.log(5);
//   })
//   console.log(6)
//   setTimeout(() => {
//     console.log(7)
//     setTimeout(() => {
//       console.log(8)
//       res()
//     }, 0)
//   }, 0)
// }).then(() => {
//   console.log(9)
//   setTimeout(() => {
//     console.log(10)
//   }, 0)
//   new Promise((res) => {
//     console.log(11)
//     res()
//   }).then(() => {
//     console.log(12)
//   })
// })
// console.log(13)

  从现在开始，假设我们是JS引擎，开始解析代码。

  从上往下扫描代码，按不同任务进行不同处理：

// setTimeout(() => {      //宏任务1,放入宏任务队列
//   console.log(1)
//   setTimeout(() => {
//     console.log(2)
//   }, 0)
// }, 0)
new Promise((res) => {    //同步任务,执行
  new Promise((res) => {  //同步任务,执行
//     setTimeout(() => { //宏任务2,放入宏任务队列
//       console.log(3);
//     })
    console.log(4);       //同步任务,执行,输出4
    res()                 //同步任务,执行,此语句释放出微任务1
  })
// .then(() => {          //微任务1,放入微任务队列
//     console.log(5);
//   })
  console.log(6)          //同步任务,执行,输出6
//   setTimeout(() => {   //宏任务3,放入宏任务队列
//     console.log(7)
//     setTimeout(() => {
//       console.log(8)
//       res()
//     }, 0)
//   }, 0)
})
// .then(() => {
//   console.log(9)
//   setTimeout(() => {
//     console.log(10)
//   }, 0)
//   new Promise((res) => {
//     console.log(11)
//     res()
//   }).then(() => {
//     console.log(12)
//   })
// })
console.log(13)         //同步任务,执行,输出13

//宏任务队列: 1 2 3
//微任务队列: 1
//这一轮输出: 4 6 13

  同步任务执行完成，发现微任务队列有任务，执行微任务1

// setTimeout(() => {      //宏任务1,放入宏任务队列
//   console.log(1)
//   setTimeout(() => {
//     console.log(2)
//   }, 0)
// }, 0)
new Promise((res) => {    //同步任务,执行
  new Promise((res) => {  //同步任务,执行
    //     setTimeout(() => { //宏任务2,放入宏任务队列
    //       console.log(3);
    //     })
    console.log(4);       //同步任务,执行,输出4
    res()                 //同步任务,执行,此语句释放出微任务1
  })
    .then(() => {          //微任务1,放入微任务队列->执行
      console.log(5);      //-----同步任务,执行,输出5
    })
  console.log(6)          //同步任务,执行,输出6
  //   setTimeout(() => {   //宏任务3,放入宏任务队列
  //     console.log(7)
  //     setTimeout(() => {
  //       console.log(8)
  //       res()
  //     }, 0)
  //   }, 0)
})
// .then(() => {
//   console.log(9)
//   setTimeout(() => {
//     console.log(10)
//   }, 0)
//   new Promise((res) => {
//     console.log(11)
//     res()
//   }).then(() => {
//     console.log(12)
//   })
// })
console.log(13)         //同步任务,执行,输出13

//宏任务队列: 1 2 3
//微任务队列: 
//这一轮输出: 4 6 13 5

  微任务队列为空，宏任务队列有任务在排队，依次执行宏任务1、2、3 

setTimeout(() => {            //宏任务1,放入宏任务队列 --> 执行
  console.log(1)              //-----同步任务,输出1
  //   setTimeout(() => {     //-----宏任务4,放入宏任务队列
  //     console.log(2)
  //   }, 0)
}, 0)
new Promise((res) => {        //同步任务,执行
  new Promise((res) => {      //同步任务,执行
    setTimeout(() => {        //宏任务2,放入宏任务队列 --> 执行
      console.log(3);         //-----同步任务,执行,输出3
    })    
    console.log(4);           //同步任务,执行,输出4
    res()                     //同步任务,执行,此语句释放出微任务1
  })    
    .then(() => {             //微任务1,放入微任务队列->执行
      console.log(5);         //-----同步任务,执行,输出5
    })
  console.log(6)              //同步任务,执行,输出6
  setTimeout(() => {          //宏任务3,放入宏任务队列
    console.log(7)            //-----同步任务,执行,输出7
    //     setTimeout(() => { //-----宏任务5,放入宏任务队列
    //       console.log(8)
    //       res()
    //     }, 0)
  }, 0)
})
// .then(() => {
//   console.log(9)
//   setTimeout(() => {
//     console.log(10)
//   }, 0)
//   new Promise((res) => {
//     console.log(11)
//     res()
//   }).then(() => {
//     console.log(12)
//   })
// })
console.log(13)         //同步任务,执行,输出13

//宏任务队列: 4 5
//微任务队列:
//这一轮输出: 4 6 13 5 1 3 7

  宏任务队列有任务在排队，依次执行宏任务4、5

setTimeout(() => {            //宏任务1,放入宏任务队列 --> 执行
  console.log(1)              //-----同步任务,输出1
  setTimeout(() => {          //-----宏任务4,放入宏任务队列 --> 执行
    console.log(2)            //----------同步任务,执行,输出2
  }, 0)
}, 0)
new Promise((res) => {        //同步任务,执行
  new Promise((res) => {      //同步任务,执行
    setTimeout(() => {        //宏任务2,放入宏任务队列 --> 执行
      console.log(3);         //-----同步任务,执行,输出3
    })
    console.log(4);           //同步任务,执行,输出4
    res()                     //同步任务,执行,此语句释放出微任务1
  })
    .then(() => {             //微任务1,放入微任务队列->执行
      console.log(5);         //-----同步任务,执行,输出5
    })
  console.log(6)              //同步任务,执行,输出6
  setTimeout(() => {          //宏任务3,放入宏任务队列
    console.log(7)            //-----同步任务,执行,输出7
    setTimeout(() => {        //-----宏任务5,放入宏任务队列 --> 执行
      console.log(8)          //----------同步任务,执行,输出8
      res()                   //----------同步任务,执行,此语句释放出微任务2
    }, 0)
  }, 0)
})
// .then(() => {              //微任务2,放入微任务队列
//   console.log(9)
//   setTimeout(() => {
//     console.log(10)
//   }, 0)
//   new Promise((res) => {
//     console.log(11)
//     res()
//   }).then(() => {
//     console.log(12)
//   })
// })
console.log(13)         //同步任务,执行,输出13

//宏任务队列:
//微任务队列: 2
//这一轮输出: 4 6 13 5 1 3 7 2 8

  执行微任务2

setTimeout(() => {            //宏任务1,放入宏任务队列 --> 执行
  console.log(1)              //-----同步任务,输出1
  setTimeout(() => {          //-----宏任务4,放入宏任务队列 --> 执行
    console.log(2)            //----------同步任务,执行,输出2
  }, 0)
}, 0)
new Promise((res) => {        //同步任务,执行
  new Promise((res) => {      //同步任务,执行
    setTimeout(() => {        //宏任务2,放入宏任务队列 --> 执行
      console.log(3);         //-----同步任务,执行,输出3
    })
    console.log(4);           //同步任务,执行,输出4
    res()                     //同步任务,执行,此语句释放出微任务1
  })
    .then(() => {             //微任务1,放入微任务队列->执行
      console.log(5);         //-----同步任务,执行,输出5
    })
  console.log(6)              //同步任务,执行,输出6
  setTimeout(() => {          //宏任务3,放入宏任务队列
    console.log(7)            //-----同步任务,执行,输出7
    setTimeout(() => {        //-----宏任务5,放入宏任务队列 --> 执行
      console.log(8)          //----------同步任务,执行,输出8
      res()                   //----------同步任务,执行,此语句释放出微任务2
    }, 0)
  }, 0)
})
  .then(() => {              //微任务2,放入微任务队列 --> 执行
      console.log(9)         //---------------同步任务,执行,输出9
    //   setTimeout(() => {  //---------------宏任务6,放入宏任务队列
    //     console.log(10)
    //   }, 0)
      new Promise((res) => { //---------------同步任务,执行
        console.log(11)      //---------------同步任务,执行
        res()                //---------------同步任务,执行,此语句释放出微任务3
      })
    // .then(() => {         //微任务3,放入微任务队列
    //     console.log(12)
    //   })
  })
console.log(13)         //同步任务,执行,输出13

//宏任务队列: 6
//微任务队列: 3
//这一轮输出: 4 6 13 5 1 3 7 2 8 9

  执行微任务3：

setTimeout(() => {            //宏任务1,放入宏任务队列 --> 执行
  console.log(1)              //-----同步任务,输出1
  setTimeout(() => {          //-----宏任务4,放入宏任务队列 --> 执行
    console.log(2)            //----------同步任务,执行,输出2
  }, 0)
}, 0)
new Promise((res) => {        //同步任务,执行
  new Promise((res) => {      //同步任务,执行
    setTimeout(() => {        //宏任务2,放入宏任务队列 --> 执行
      console.log(3);         //-----同步任务,执行,输出3
    })
    console.log(4);           //同步任务,执行,输出4
    res()                     //同步任务,执行,此语句释放出微任务1
  })
    .then(() => {             //微任务1,放入微任务队列->执行
      console.log(5);         //-----同步任务,执行,输出5
    })
  console.log(6)              //同步任务,执行,输出6
  setTimeout(() => {          //宏任务3,放入宏任务队列
    console.log(7)            //-----同步任务,执行,输出7
    setTimeout(() => {        //-----宏任务5,放入宏任务队列 --> 执行
      console.log(8)          //----------同步任务,执行,输出8
      res()                   //----------同步任务,执行,此语句释放出微任务2
    }, 0)
  }, 0)
})
  .then(() => {              //微任务2,放入微任务队列 --> 执行
    console.log(9)         //---------------同步任务,执行,输出9
    //   setTimeout(() => {  //---------------宏任务6,放入宏任务队列
    //     console.log(10)
    //   }, 0)
    new Promise((res) => { //---------------同步任务,执行
      console.log(11)      //---------------同步任务,执行，输出11
      res()                //---------------同步任务,执行,此语句释放出微任务3
    })
      .then(() => {         //微任务3,放入微任务队列  --> 执行
        console.log(12)     //--------------------同步任务,执行,输出12
      })
  })
console.log(13)         //同步任务,执行,输出13

//宏任务队列: 6
//微任务队列:
//这一轮输出: 4 6 13 5 1 3 7 2 8 9 11 12

  执行宏任务6

setTimeout(() => {            //宏任务1,放入宏任务队列 --> 执行
  console.log(1)              //-----同步任务,输出1
  setTimeout(() => {          //-----宏任务4,放入宏任务队列 --> 执行
    console.log(2)            //----------同步任务,执行,输出2
  }, 0)
}, 0)
new Promise((res) => {        //同步任务,执行
  new Promise((res) => {      //同步任务,执行
    setTimeout(() => {        //宏任务2,放入宏任务队列 --> 执行
      console.log(3);         //-----同步任务,执行,输出3
    })
    console.log(4);           //同步任务,执行,输出4
    res()                     //同步任务,执行,此语句释放出微任务1
  })
    .then(() => {             //微任务1,放入微任务队列->执行
      console.log(5);         //-----同步任务,执行,输出5
    })
  console.log(6)              //同步任务,执行,输出6
  setTimeout(() => {          //宏任务3,放入宏任务队列
    console.log(7)            //-----同步任务,执行,输出7
    setTimeout(() => {        //-----宏任务5,放入宏任务队列 --> 执行
      console.log(8)          //----------同步任务,执行,输出8
      res()                   //----------同步任务,执行,此语句释放出微任务2
    }, 0)
  }, 0)
})
  .then(() => {              //微任务2,放入微任务队列 --> 执行
    console.log(9)            //---------------同步任务,执行,输出9
    setTimeout(() => {      //---------------宏任务6,放入宏任务队列 --> 执行
      console.log(10)       //--------------------同步任务,执行,输出10
    }, 0)
    new Promise((res) => { //---------------同步任务,执行
      console.log(11)      //---------------同步任务,执行,输出11
      res()                //---------------同步任务,执行,此语句释放出微任务3
    })
      .then(() => {         //微任务3,放入微任务队列  --> 执行
        console.log(12)     //--------------------同步任务,执行,输出12
      })
  })
console.log(13)         //同步任务,执行,输出13

//宏任务队列: 
//微任务队列:
//这一轮输出: 4 6 13 5 1 3 7 2 8 9 11 12 10

  最终输出：4 6 13 5 1 3 7 2 8 9 11 12 10

rainkyzhong
关注
说出下面JavaScript代码运行的结果，说说为什么？
越陌度阡
11-14 668
function test(person) { person.age = 26 ; person = { name: 'abc', age: 18 } return person } ; const p1 = { name: 'xyz', age: 19 }; const p2 = test(p1) ; console.log(p1); console.log(p2); 执行结果如下： console.log(p1); // {"name": "xyz","age": 26} .
经典面试题(12)：关于事件循环，以下代码将输出什么？
qq_24520459的博客
03-01 395
看下面的代码，输出的结果是什么？并解释你的答案。function printing() { console.log(1); setTimeout(fu...
JS事件循环机制
最新发布
zhoupenglkh的博客
09-17 1105
结果为 1 3 2因为代码是从上往下执行的，首先会执行打印一的结果1.JS引擎会将打印结果1放在调用栈当中，然后执行代码，在控制台输出1，当打印结果1执行完毕后，便将其从调用栈中移出去。2.接着打印结果2进入调用栈，打印结果2会调用Web API,1秒后进入回调队列，此时JS引擎将打印结果2移出调用栈，继续执行后面的代码。所以控制台输出了33.此时进入事件循环（EventLoop）,他会不断循环的访问回调队列，等待1秒后Web API会将要执行的打印结果2放入回调队列；事件循环（EventLoop。
显示JavaScript 运行结果
随缘就学
01-13 1055
通过 JavaScript 算出一个结果，然后展示在网页上。
这些经典JS代码运行结果真是让我意想不到
欣欣酱博客
03-23 977
1. 1 2 3 4 5 6 7 8 9 10 11 varcolor='green'; //全局作用域下 vartest4399={ color:'blue', getColor:function(){ varcolor="red"; alert(this.color); ...
js学习过程--分析js执行结果
workhard0905的博客
05-21 301
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>闭包</title> </head> <body> <div id="1">1</div> <div id="2">2</div> <div id="3">3</div> </bo.
js使用for循环查询数组中是否存在某个值
10-25
如果循环条件表达式的结果为true，则执行循环体内的代码，否则退出循环。 接下来，我们要讨论的关键知识点是IE8浏览器对JavaScript某些API的支持问题。IE8是微软在2009年推出的Internet Explorer 8版本浏览器，由于...
服务端运行javascript代码
09-30
除了Node.js，还有一些其他框架和库也支持服务端JavaScript，比如Deno，它是由Node.js的创建者Ryan Dahl推出的全新JavaScript/TypeScript运行时。Deno提供了一种更现代、更安全的环境，内置了 TypeScript 支持和权限...
JavaScript基础教程：从For循环到对象与事件
在JavaScript中，For循环语句是程序控制流程中的重要组成部分，用于重复执行一段代码，直到指定的条件不再满足。基本的For循环语法格式如下： ```javascript for (初始化；条件；增量) { // 语句集 } ``` 1. **...
C++实现任意层数和阶数循环的原创代码
这种情况在处理复杂的数据结构或者根据运行时的输入来决定循环层数时非常有用。 ### 4. C++代码实现 在C++中实现任意重循环，通常需要使用指针、数组、递归或模板编程等高级特性。以下是实现任意重循环可能用到的...
JavaScript_学习全栈开发代码的终极指南，可以让你很快找到一份工作.zip
05-20
在JavaScript的世界里，Node.js提供了在服务器端运行JavaScript的能力。学习Node.js，你需要掌握其核心模块（如fs、http、path等），还有Express框架用于快速构建web应用。数据库交互方面，MongoDB常常与Node.js结合...
js事件循环——看输出顺序
weixin_44428184的博客
08-22 485
js事件循环： 由于js是单线程的，同一时间只能干一件事情，当期宿主环境为浏览器时，若一个任务耗时过长会导致页面阻塞。因此有了js事件循环机制，它将任务分成同步任务和异步任务，同步任务在主线程不断执行，异步任务进入任务队列，当同步任务执行完主栈为空时，就去任务队列读取异步任务执行，这个不断循环的过程称为事件循环。 1.promise: 微任务，进入微任务队列，在本轮事件循环中执行，例如： new Promise(function(resolve) { console.log('promis
js的单线程事件循环机制(event loop)的典型例子
吃瓜群众的博客
04-19 537
事件循环机制宏任务微任务讲解，js的单线程事件循环机制(event loop)的典型例子
js代码输出的结果，任务队列知识点
2201_75773271的博客
08-05 352
5遇到timer2，它是一个宏任务，将其加入宏任务队列，此时宏任务队列有两个任务，分别是timer1、timer2；4这样第一轮宏任务就执行完了，开始执行微任务Promise.resolve().then，打印出promise1。6这样第一轮微任务就执行完了，开始执行第二轮宏任务，首先执行定时器timer1，打印timer1；7遇到Promise.resolve().then，它是一个微任务，加入微任务队列。1首先，Promise.resolve().then是一个微任务，加入微任务队列。
js 的四种for循环（forEach的返回值异常），测试满足条件的return效果
lk2913128603的博客
12-08 3568
js 的四种for循环（forEach的返回值异常），测试满足条件的return效果
JS 动态执行代码的四种方式
m0_47195133的博客
03-06 1430
JS 动态执行代码的四种方式
【Harmony OS】WebView调用JS并获取执行结果
华为开发者联盟
08-04 773
WebView提供了在应用中集成Web页面的能力。在日常的开发中也会经常用到。WebView派生于通用组件Component，可以像普通组件一样进行使用。今天我们就介绍如何在应用内调用页面内的JavaScript方法。欲了解更多更全技术文章，欢迎访问。...
js：调用一个方法，如何获取一个方法的运行结果？举例说明
xie_bro的博客
08-18 2342
调用一个方法，如果获取一个方法的运行结果？举例说明 1) 通过返回值 //同步 function add(a,b){ let result = a + b; return result; } var result = add(1,2); console.log(result); 2) 通过回调函数 function add(a,b,handle){ // 异步 setTimeout(function(){ let resul
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值