异步 JavaScript

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

我们可以使用回调函数、Promise、async/await 等在我们的 JavaScript 程序中实现异步操作。回调函数是作为参数传递给其他函数的函数。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 to check whether the number is a prime number
      function checkForPrime(num) {
         for (let p = 2; p <= Math.sqrt(num); p++) {
            if (num % p === 0) { // Check whether the number is divisible by p
               return false;
            }
         }
         return num > 1;
      }
      function getPrimes() {
         const primeNums = []; // Array to store prime numbers
         let p = 1;
         while (primeNums.length < 1000000) { // Find first 10 lakh prime numbers
            if (checkForPrime(p)) {
               primeNums.push(p);
            }
            p++;
         }
         output.innerHTML += "The execution of the getPrime() function is completed. <br>";
      }
      function printMessage() { // Function to print the message
         output.innerHTML += "Button is clicked! <br>";
      }
   </script>
</body>
</html>

输出

异步 JavaScript 的实时用例

以下是异步 JavaScript 的实时用例。

从 API 获取数据

当你从 API 获取数据时，根据服务器的响应时间，获取数据需要一些时间。因此，你可以使用异步 JavaScript 来继续执行其他代码，而无需等待 API 响应。

加载外部资源

有时，你需要将多个库、外部脚本、图像等加载到应用程序中。网页不允许你在加载所有外部资源之前与网页交互。因此，你可以异步加载外部资源。

任务调度

可以使用异步 JavaScript 通过 `setTimeOut()` 方法调度任务，或者使用 `setInterval()` 方法在特定时间间隔后执行任务。

数据验证

有时，开发者需要进行数据验证。您可以将此类任务在后台或与其他代码并行执行。

文件上传

如果您允许用户上传大型文件，则根据用户的网络速度，上传可能需要一些时间。因此，您可以异步执行文件上传。

数据缓存

数据缓存是提高应用程序性能最重要的功能之一，并且根据数据大小可能需要一些时间。因此，您可以使用 Promise 异步缓存数据。

打印页面