javascript - 函数的运行时执行过程

Question

我想知道下面的代码如何在运行时执行。 我知道事件是由浏览器 API 处理的，因此会从调用堆栈中弹出。然后回调由 API 注册到队列中。一旦堆栈为空，这些消息就会被执行。

但是当onclick回调函数中有多个函数时就会出现这种情况。其中具有顺序和异步功能。然后他们会再次从队列调用堆栈推回浏览器 API，然后再次推回到浏览器 API？

下面的整个代码是如何执行的？

$('#test').on(click, function() {
   console.log('start');

   //modifies the dom like add div in the html
   modifyDom();

   //http ajax call
   someAjaxCall();

   while(let i < 5) {
      console.log(i);
      i++
   }

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


});

Answer 1

让我们添加行号来跟踪执行情况

01 $('#test').on(click, function() {
02    console.log('start');
03 
04    modifyDom();
05 
06    someAjaxCall();
07 
08    while(let i < 5) {
09       console.log(i);
10       i++;
11    }
12 
13    setTimeout(
14       function(){
15          console.log('Zero Delay');
16       },
17       0
18    );
19 });

1. 01:附加事件处理程序
2. 等待点击 ...
3. 点击
4. 02:在控制台上打印“开始”
5. 04:执行 DOM 操作
6. 06:调度ajax请求并在网络线程(不是主线程)上等待响应
7. 08-11
   1. i 为 0
   2. i 是 1
   3. i 是 2
   4. i 是 3
   5. i 是 4
8. 13-18:添加回调14-16到定时器线程(不是主线程)
9. 等待线程返回控制权...

<小时/>

现在，以下任何情况都可能发生:

1. 在完成之前的执行之前，ajax 和/或超时“返回”
2. ajax 在超时前“返回”
3. ajax 之前的超时“返回”

在情况 1 中，主线程根本不关心“返回”的内容，因为它是单个连续的同步指令堆栈。这意味着情况 1 最终会解决情况 2 和 3

在情况 2 和 3 中，由于 Promise 微任务优先于计时器线程，因此首先 Promise ajax“返回”，然后发生超时回调

<小时/>

编辑 1

我强烈推荐观看this talk关于事件循环基础知识及其他主题，因为它解释了同步代码、计时器、 promise 等的交互