返回

JS中的同步异步编程机制，轻松理解Event Queue和EventLoop

前端

JS中的同步异步编程机制

JavaScript作为一门单线程的语言，大部分代码都是同步执行的，这意味着代码会按照从上到下的顺序依次执行。然而，JavaScript也提供了异步编程的特性，允许某些任务在不阻塞主线程的情况下执行，从而提高程序的响应速度和性能。

Event Queue和EventLoop

为了实现异步编程，JavaScript引入了Event Queue（事件队列）和EventLoop（事件循环）的概念。Event Queue是一个先进先出（FIFO）的队列，用于存储等待执行的事件。EventLoop则是一个不断循环的事件处理机制，它从Event Queue中取出事件并执行。

当一个异步任务被触发时，它会被添加到Event Queue中。EventLoop会不断检查Event Queue，当发现有新的事件时，它就会将该事件从队列中取出并执行。

同步与异步代码的执行顺序

在JavaScript中，同步代码会立即执行，而异步代码则会被添加到Event Queue中，等待EventLoop执行。因此，同步代码的执行顺序与代码的书写顺序是一致的，而异步代码的执行顺序则取决于Event Queue中事件的先后顺序。

例如，以下代码中，同步代码console.log("同步代码")会立即执行，而异步代码setTimeout(function(){console.log("异步代码")}, 0)则会被添加到Event Queue中。由于setTimeout是一个异步函数，因此它会被放到Event Queue中等待执行，而不会立即执行。

console.log("同步代码");
setTimeout(function(){
  console.log("异步代码");
}, 0);

练习题

  1. 在以下代码中，输出结果是什么？
function test() {
  console.log(1);
  setTimeout(function() {
    console.log(2);
  }, 0);
  console.log(3);
}

test();
  1. 在以下代码中，输出结果是什么？
function test() {
  console.log(1);
  setTimeout(function() {
    console.log(2);
  }, 1000);
  console.log(3);
}

test();
  1. 在以下代码中，输出结果是什么？
function test() {
  console.log(1);
  setTimeout(function() {
    console.log(2);
  });
  console.log(3);
}

test();

答案

  1. 输出结果是：1、3、2。

  2. 输出结果是：1、3、2。

  3. 输出结果是：1、3、2。