同步与异步 JavaScript 简化-js教程-PHP中文网

同步与异步 JavaScript 简化

心靈之曲

发布： 2024-12-02 15:39:20

转载

566人浏览过

同步与异步 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");

登录后复制

输出：

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 之间的主要区别

feature	synchronous	asynchronous
execution	executes line by line	tasks can run in the background
blocking	blocks subsequent code	non-blocking
examples	loops, standard functions	callbacks, promises, async/await

使用 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 等异步模式来确保流畅的用户体验。

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

以上就是同步与异步 JavaScript 简化的详细内容，更多请关注php中文网其它相关文章！