非同步 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 非同步快取資料。

列印頁面