正文

JavaScript代码既可以同步也可以异步执行。在JavaScript中，同步代码会按顺序执行，直到遇到异步操作。异步代码则会在当前执行线程中暂停，直到异步操作完成，然后再继续执行后面的同步代码。例如，使用`setTimeout`、`Promise`或`async/await`等方式实现的异步代码，都是不会阻塞同步代码的执行。

/0 浏览量
0408

在JavaScript的世界里，代码的执行方式可以分为同步和异步两种。这两种执行方式决定了代码执行时的顺序和效率。下面，我们就来详细探讨一下JavaScript中的同步与异步执行。

同步执行

同步执行指的是代码按照编写顺序依次执行。在JavaScript中，同步代码会按顺序执行，直到遇到异步操作。以下是同步执行的一些特点：

  • 顺序执行：同步代码会按照代码块中的顺序依次执行。
  • 阻塞执行：同步代码执行期间，JavaScript引擎会暂停执行其他代码，直到当前同步代码执行完毕。
  • 代码示例：
console.log('同步代码1');
console.log('同步代码2');
console.log('同步代码3');

在这个例子中，console.log函数会按照顺序执行，输出结果为：

同步代码1
同步代码2
同步代码3

异步执行

异步执行指的是代码在执行过程中，可以暂停执行，等待某个事件完成后再继续执行。在JavaScript中，异步代码不会阻塞同步代码的执行。以下是异步执行的一些特点：

  • 非顺序执行：异步代码可以在任何时间点执行，不一定按照代码块中的顺序。
  • 非阻塞执行：异步代码执行期间，JavaScript引擎可以继续执行其他同步代码。
  • 事件驱动：异步执行通常与事件相关，例如setTimeout、Promise或async/await等。

异步代码示例

使用setTimeout

console.log('同步代码1');

setTimeout(() => {
  console.log('异步代码1');
}, 1000);

console.log('同步代码2');

在这个例子中，console.log('异步代码1')会在1秒后执行，输出结果为：

同步代码1
同步代码2
异步代码1

使用Promise

console.log('同步代码1');

new Promise((resolve) => {
  console.log('异步代码1');
  resolve();
}).then(() => {
  console.log('异步代码2');
});

console.log('同步代码2');

在这个例子中，console.log('异步代码1')和console.log('异步代码2')会在同步代码执行完毕后依次执行，输出结果为：

同步代码1
异步代码1
同步代码2
异步代码2

使用async/await

async function testAsync() {
  console.log('同步代码1');

  await new Promise((resolve) => {
    console.log('异步代码1');
    resolve();
  });

  console.log('异步代码2');
}

testAsync();

console.log('同步代码2');

在这个例子中，console.log('异步代码1')和console.log('异步代码2')会在同步代码执行完毕后依次执行，输出结果为：

同步代码1
异步代码1
同步代码2
异步代码2

总结

JavaScript中的同步与异步执行对于理解代码执行顺序和性能至关重要。通过合理运用同步和异步代码，我们可以编写出高效、可维护的JavaScript程序。希望这篇文章能帮助你更好地理解JavaScript中的同步与异步执行。

-- 展开阅读全文 --