今日份快乐学习setTimeout，async,事件队列

2023-09-09 10:34:51

探索 JavaScript 中的时间魔法：setTimeout 和 async

了解 setTimeout：在适当的时候执行任务

想象一下，你是一个超级英雄，可以安排事件在未来的某个时刻发生。这就是 setTimeout 函数的魅力所在。它让你可以指定一个函数，并在指定的时间后自动执行它。就像一个计时器，它会等待你设置的毫秒数，然后触发任务执行。

举个例子，如果你想在 5 秒后输出"你好，世界！"，你可以使用以下代码：

setTimeout(() => {
  console.log("你好，世界！");
}, 5000);

揭秘 async：异步编程的新时代

async 函数是 JavaScript 中的异步英雄。它们可以暂停执行，等待异步操作（例如网络请求）完成，然后无缝地恢复执行。这就像拥有一台超级计算机，可以同时处理多个任务，而不必等待每个任务都完成。

以下示例展示了如何使用 async 函数进行异步编程：

async function getProducts() {
  const response = await fetch("https://example.com/products");
  const products = await response.json();
  return products;
}

getProducts().then((products) => {
  console.log(products);
});

这段代码将从远程服务器获取产品列表，然后将其打印到控制台。通过使用 async 函数，我们避免了使用回调或 Promise 的繁琐，而是使用更干净、更易读的语法。

事件队列：JavaScript 的异步心脏

想象一个虚拟队列，里面存放着所有待处理的事件。这就是事件队列。当 JavaScript 引擎遇到异步操作时，它会将该操作添加到队列中。然后，这些事件会按照先进先出的原则处理。

例如，如果你有如下事件队列：

| 事件 | 执行顺序 |
|---|---|
| setTimeout(sayHello, 2000) | 1 |
| 获取用户输入 | 2 |
| 网络请求 | 3 |

setTimeout 事件将首先执行，然后是用户输入事件，最后是网络请求事件。JavaScript 引擎会依次处理这些事件，让你可以异步地执行代码。

实战案例：创建倒计时程序

让我们用 setTimeout 和 Promise 创建一个倒计时程序。想象一下你有一个 5 秒的倒计时，当倒计时结束时，它会输出"时间到！"。

function countdown(seconds) {
  const promise = new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log("时间到！");
      resolve();
    }, seconds * 1000);
  });

  return promise;
}

countdown(5).then(() => {
  // 倒计时结束，做些事情
});