同步与异步 JavaScript 简化

javascript 被广泛认为是一种单线程语言。这意味着它一次只能按一个顺序执行一段代码。然而，javascript 高效处理异步任务的能力是其强大的构建交互式和响应式应用程序的原因之一。

在本文中，我们将通过实际示例探讨同步和异步 javascript 之间的主要区别。

什么是同步 javascript？

同步代码逐行执行，一次一步。每个操作都会等待前一个操作完成，然后再进行下一个操作。

同步 javascript 示例

console.log("start");

// a time-consuming operation (like a loop)
for (let i = 0; i < 9; i++) {
  // simulating a delay
}

console.log("end");

输出：

ECMall 繁体UFT-8

与 ECShop 不同的是，ECMall 是一个允许店铺加盟的多店系统。它不仅可以帮助众多成熟的网络社区实现社区电子商务还可以推进各种地域性、垂直性明显的门户网站的电子商务进程。 ECMall是一个根据融合了电子商务以及网络社区特色的产品，它不仅能使您的电子商务进程变得异常轻松，同时通过和康盛创想相关产品的结合还能进一步提高用户的活跃度以及黏性，从而促进用户的忠诚度。 ECMall 2.3.0 正

下载

start
end

在此示例中，循环会阻止代码执行。如果这是一个现实世界的应用程序，ui 将在循环期间冻结，因为 javascript 正忙于处理它。

立即学习“Java免费学习笔记（深入）”；

什么是异步 javascript？

异步代码允许某些任务在后台运行，使程序无需等待即可继续执行其他任务。

javascript 使用如下机制实现这一点：

• 回调
• 承诺
• 异步/等待 使用 settimeout 的异步 javascript 示例

console.log("start");

settimeout(() => {
  console.log("timeout completed");
}, 2000); // 2-second delay

console.log("end");

输出：

start
end
timeout completed

这里，settimeout 函数是异步运行的。它安排回调函数在 2 秒后执行，但同时不会阻止代码执行。

同步和异步 javascript 之间的主要区别

使用 promise 进行异步编程

promise 使处理异步操作变得更加容易。这是一个例子：

const fetchdata = new promise((resolve, reject) => {
  settimeout(() => {
    resolve("data fetched successfully!");
  }, 2000);
});

console.log("fetching data...");
fetchdata.then((data) => {
  console.log(data);
}).catch((error) => {
  console.log(error);
});

输出：

fetching data...
data fetched successfully!

async/await：更简洁的 promise 语法

async 和await 关键字简化了promises 的使用：

const fetchdata = () => {
  return new promise((resolve) => {
    settimeout(() => {
      resolve("data fetched successfully!");
    }, 2000);
  });
};

const fetchasyncdata = async () => {
  console.log("fetching data...");
  const data = await fetchdata();
  console.log(data);
};

fetchasyncdata();

输出：

fetching data...
data fetched successfully!

结论

理解同步和异步 javascript 之间的区别对于构建高效和非阻塞的应用程序至关重要。使用 promises 和 async/await 等异步模式来确保流畅的用户体验。

如果您有任何问题或示例要分享，请随时在下面发表评论！