通俗易懂解读：同步与异步、setTimeout、Promise和Async

2023-10-28 01:51:57

同步与异步：JavaScript 的核心概念

在 JavaScript 中，同步和异步是开发人员编写强大、响应迅速的代码所必需的两个基本概念。理解这两者的差异至关重要，它们决定了代码的执行顺序，从而影响应用程序的整体行为和用户体验。

同步与异步

同步代码 的执行顺序与它在代码中出现的顺序完全一致。这意味着当 JavaScript 引擎到达一段代码时，它必须完全执行该代码，然后再继续执行下一行代码。这类似于在队列中排队，每个人都必须按顺序等待。

异步代码 则不同。它允许 JavaScript 引擎在不等待代码块完成的情况下继续执行。这就像在多条队列中排队，您可以继续处理其他队列，同时等待一个队列中的任务完成。异步代码通常用于长时间运行的任务，例如网络请求或 setTimeout()。

setTimeout()

setTimeout() 函数是一个异步函数，可用于在指定的毫秒数后执行代码。它接受三个参数：要执行的函数、延迟时间（以毫秒为单位）和可选参数（要传递给函数的参数）。

使用 setTimeout()，您可以安排在一段时间后执行任务，而无需阻塞主线程。这对于创建流畅的用户界面和避免应用程序冻结非常有用。

// 在 5 秒后显示 "Hello world！"
setTimeout(() => {
  console.log("Hello world!");
}, 5000);

Promise

Promise 是一个对象，表示异步操作的最终结果。它有三种状态：

Pending： 操作正在进行中。
Fulfilled： 操作已成功完成。
Rejected： 操作已失败。

使用 Promise，您可以跟踪异步操作的状态，并在操作完成或失败时执行相应的代码。

// 创建一个 Promise，在 3 秒后完成
const myPromise = new Promise((resolve) => {
  setTimeout(() => {
    resolve("Promise fulfilled!");
  }, 3000);
});

// 然后使用 .then() 方法在 Promise 完成时执行代码
myPromise.then((result) => {
  console.log(result); // 输出："Promise fulfilled!"
});

Async/Await

async/await 是 ES6 中引入的语法糖，可用于编写异步代码，同时保持同步代码的编写风格。

async 用于将函数标记为异步函数，而 await 关键字用于暂停函数执行，直到异步操作完成。

使用 async/await，您可以避免嵌套回调函数，从而使异步代码更易于阅读和维护。

// 使用 async/await 执行 setTimeout()
async function myFunction() {
  const result = await setTimeout(() => {
    return "Async/Await example!";
  }, 2000);

  console.log(result); // 输出："Async/Await example!"
}

myFunction();

示例

下面是一个示例，展示了如何使用 setTimeout()、Promise 和 async/await 实现一个简单的倒计时功能：

使用 setTimeout()：

function countdown(seconds) {
  setTimeout(() => {
    console.log(seconds);
    if (seconds > 0) {
      countdown(seconds - 1);
    }
  }, 1000);
}

countdown(5); // 输出：5、4、3、2、1、0

使用 Promise：

function countdownPromise(seconds) {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log(seconds);
      if (seconds > 0) {
        resolve(countdownPromise(seconds - 1));
      } else {
        resolve();
      }
    }, 1000);
  });
}

countdownPromise(5).then(() => {
  console.log("倒计时结束！");
});

使用 async/await：

async function countdownAsync(seconds) {
  console.log(seconds);
  if (seconds > 0) {
    await countdownAsync(seconds - 1);
  }
}

countdownAsync(5); // 输出：5、4、3、2、1、0

总结

了解同步与异步是编写健壮、可维护的 JavaScript 代码的关键。使用 setTimeout()、Promise 和 async/await，您可以控制异步操作的执行，并创建响应迅速、用户友好的应用程序。

常见问题解答

1. 同步和异步代码之间有什么区别？

同步代码按顺序执行，而异步代码允许在等待异步操作完成的同时继续执行其他代码。

2. setTimeout() 是做什么用的？

setTimeout() 用于在指定的毫秒数后执行一个函数，它是异步的。

3. Promise 是什么？

Promise 表示异步操作的最终结果，它有三种状态：pending、fulfilled 和 rejected。

4. async/await 如何工作？

async/await 用于编写异步代码，同时保持同步代码的编写风格，它允许您暂停函数执行，直到异步操作完成。

5. 我何时应该使用异步代码？