JS事件循环机制

  let t0 = Date.now();
  let t1 = 0;
  let t2 = 0;
  let t3 = 0;
  let t4 = 0;
  f1();
  f2();

  function timerFn() {
    console.log('bbbbb');
    t3 = Date.now();
    console.log('timerFn:', (t3 - t0) / 1000)
  }
  function f1() {
    setTimeout(timerFn, 1000);
  }

  function f2() {
    for (let i = 0; i <= 1000000000; i++) {
      if (i === 1000000000) {
        console.log(i)
      }
    }
    t2 = Date.now();
    console.log('f2():', (t2 - t0) / 1000)
  }

打印结果如下：

1000000000
f2(): 2.045
bbbbb
timerFn: 2.055

事件循环机制

js刚开始执行时，执行栈中只有 f1() 和 f2() 两个任务待执行。

在执行 f1() 时，因为调用了 setTimeout，所以开启了定时器线程开始计时，在计时1s 后，将 timerFn 放入任务队列，此时 timerFn 只是在任务队列中等待，并未进入执行栈中。

待 f2() 执行完毕，执行栈处于空闲状态，此时任务队列中的 timerFn 会被推入到执行栈中，然后开始执行 timerFn