❮ ❯

异步 JavaScript

异步 JavaScript 是一种编程技术，它使您的程序能够启动一个可能长时间运行的任务，并继续并行执行其他任务。JavaScript 是一种单线程编程语言。这意味着您可以一次执行单个脚本或特定代码。JavaScript 的控制流逐行移动并执行每一行代码。

我们可以在 JavaScript 程序中使用回调函数、Promise、async/await 等实现异步操作。回调函数是作为参数传递给其他函数的函数。Promise 是表示异步操作成功或失败的对象。async/await 语法是 Promise 的简单实现。我们将在相应的章节中详细讨论这些方法。

要并行执行多个任务，您需要异步 JavaScript。

在理解异步 JavaScript 之前，让我们先了解一下什么是同步 JavaScript。

什么是同步 JavaScript?

同步 JavaScript 逐行执行 JavaScript 代码。控制流从上至下移动，逐条运行每个语句。

让我们通过下面的示例来理解。

示例

代码的控制流如下所示。

它调用 test1() 函数。
在 test1() 函数中，它打印开始消息。
接下来，它调用 test2() 函数。
test2() 函数打印开始和结束消息。
之后，它在 test1() 函数中打印结束消息。
代码执行结束。

<html>
<body>
   <div id = "demo"> </div>
   <script>
      let output = document.getElementById('demo');
      function test2() {
         output.innerHTML += '<br>test2 started!';
         output.innerHTML += '<br>test2 finished!';
      }
      function test1() {
         output.innerHTML += 'test1 started!';
         test2();
         output.innerHTML += '<br>test1 finished!';
      }
      test1();
   </script>
</body>
</html>

输出

test1 started!
test2 started!
test2 finished!
test1 finished!

它会创建一个调用堆栈，将代码添加到其中，然后按照后进先出 (LIFO) 的顺序执行代码。

现在，让我们了解一下什么是异步 JavaScript。

什么是异步 JavaScript?

异步 JavaScript 支持同时执行代码。您可以使用异步 JavaScript 使您的应用程序实现多线程化。它允许您同时执行耗时或开销高昂的任务。

让我们通过以下示例了解异步 JavaScript。

示例

代码的执行流程如下。

它会打印开始消息。
之后，它会打印结束消息，而无需等到 setTimeOut() 方法执行完成。
最后，它会执行 setTimeOut() 方法的代码。

<html>
<body>
   <div id = "demo"> </div>
   <script>
      let output = document.getElementById('demo');
      output.innerHTML += "Code execution started. <br>";
      setTimeout(function () {
         output.innerHTML += "setTimeout() called. <br>";
      }, 1000);
      output.innerHTML += "Code execution finished. <br>";
   </script>
</body>
</html>

输出

Code execution started.
Code execution finished.
setTimeout() called.

通过编写异步 JavaScript 代码，您可以执行另一段 JavaScript 代码，而无需等待特定代码执行完毕。

为什么需要异步 JavaScript?

在上一节中，我们通过简单示例学习了如何编写异步 JavaScript 代码。但问题是，何时需要编写异步 JavaScript 代码，因为您不需要执行诸如打印消息之类的简单任务。

让我们通过以下示例来理解。

示例

在下面的代码中，我们查找前 100 万个素数。为此，我们遍历数字并使用 checkForPrime() 函数检查数字是否为素数。

在代码中，您可以点击"生成素数"按钮。代码将开始查找前 100 万个素数。之后，您可以立即点击"打印消息"按钮来打印消息。您可以观察到网页已响应，并且未打印任何消息。

但是，一旦 getPrimes() 函数执行完成，它就会打印该消息。

因此，有必要并行完成这些耗时的任务。否则，会导致网页无响应。

<html>
<body>
   <button onclick = "getPrimes()"> Generate primes </button>
   <button onclick = "printMessage()"> Print Message </button>
   <div id = "demo"> </div>
   <script>
      let output = document.getElementById('demo');
      
      // 检查数字是否为素数的函数
      function checkForPrime(num) {
         for (let p = 2; p <= Math.sqrt(num); p++) {
            if (num % p === 0) { // 检查数字是否可以被 p 整除
               return false;
            }
         }
         return num > 1;
      }
      function getPrimes() {
         const primeNums = []; // 存储素数的数组
         let p = 1;
         while (primeNums.length < 1000000) { // 查找前 100 万个素数
            if (checkForPrime(p)) {
               primeNums.push(p);
            }
            p++;
         }
         output.innerHTML += "The execution of the getPrime() function is completed. <br>";
      }
      function printMessage() { // 打印消息的函数
         output.innerHTML += "Button is clicked! <br>";
      }
   </script>
</body>
</html>

输出