https://blog.csdn.net/SemineLee/article/details/87215457

event loop即事件循环，是指浏览器或Node的一种解决javaScript单线程运行时不会阻塞的一种机制，也就是我们经常使用异步的原理。

例子

下面的按钮，按钮点击调用和，代码调用效果是不一样的。

  1. <div id="btn">
  2.     按钮
  3. </div>
  4. <script>
  5.     var btn = document.getElementById("btn");
  6.     btn.addEventListener("click", () => {
  7.         Promise.resolve().then(() => console.log("Microtask1"))
  8.         console.log("listener 1")
  9.     });
  11.     btn.addEventListener("click", () => {
  12.         Promise.resolve().then(() => console.log("Microtask2"))
  13.         console.log("listener 2")
  14.     });
  16.     btn.click()
  17. </script>

相关文章

题目

代码输出结果1

  1. const first = () => (new Promise((resovle, reject) => {
  2.     console.log(3);
  3.     let p = new Promise((resovle, reject) => {
  4.         console.log(7);
  5.         setTimeout(() => {
  6.             console.log(5);
  7.             resovle(6);
  8.         }, 0)
  9.         resovle(1);
  10.     });
  11.     resovle(2);
  12.     p.then((arg) => {
  13.         console.log(arg);
  14.     });
  15. }));
  16. first().then((arg) => {
  17.     console.log(arg);
  18. });
  19. console.log(4);

代码输出结果2

  1. function test() {
  2.     console.log(1)
  3.     setTimeout(function () {        // timer1
  4.         console.log(2)
  5.     }, 1000)
  6. }
  8. test()
  10. setTimeout(function () {         // timer1
  11.     console.log(3)
  12. })
  14. new Promise(function (resolve) {
  15.     console.log(4)
  16.     setTimeout(function () {     // timer1
  17.         console.log(5)
  18.     }, 100)
  19.     resolve()
  20. }).then(function () {
  21.     setTimeout(function () {        // timer1
  22.         console.log(6)
  23.     }, 0)
  24. })
  26. console.log(8)

看代码说出结果3

  1. async function async1() {
  2.     console.log('async1 start'); 
  3.     await async2();
  4.     console.log('async1 end'); 
  5. }
  7. async function async2() {
  8.     console.log('async2'); 
  9. }
  11. console.log('script start');  
  13. setTimeout(function() {
  14.     console.log('setTimeout'); 
  15. }, 0);
  17. async1();
  19. new Promise(function(resolve) {
  20.     console.log('promise1'); 
  21.     resolve();
  22. }).then(function() {
  23.     console.log('promise2'); 
  24. });
  26. console.log('script end');

看代码输出结果4

  1. setTimeout(() => {
  2.     console.log(7);
  3. });
  5. Promise.resolve()
  6.     .then(() => {
  7.         console.log(0);
  8.         return Promise.resolve(4);
  9.     })
  10.     .then((res) => {
  11.         console.log(res);
  12.     });
  14. Promise.resolve()
  15.     .then(() => {
  16.         console.log(1);
  17.     })
  18.     .then(() => {
  19.         console.log(2);
  20.     })
  21.     .then(() => {
  22.         console.log(3);
  23.     })
  24.     .then(() => {
  25.         console.log(5);
  26.     })
  27.     .then(() => {
  28.         console.log(6);
  29.     });

看代码输出结果5

  1. console.log(1);
  3. Promise.resolve().then(() => {
  4.     console.log(2)
  5.     return Promise.resolve(3)
  6. }).then(res => {
  7.     console.log(res);
  8. })
  10. console.log(4)
  12. new Promise((reslove, reject) => {
  13.     console.log(5)
  14.     reslove()
  15. }).then(() => {
  16.     console.log(6)
  17. })
  19. console.log(7)