JavaScript - 回撥函式

什麼是回撥函式？

JavaScript 中的回撥函式通常作為另一個函式的引數傳遞。不要將“回撥”視為此處名稱或關鍵字。“回撥”函式名稱可以是任何有效的識別符號。

回撥函式可以在父函式完成父函式中的特定任務後在父函式內部被呼叫。它主要用於處理非同步操作。

語法

您可以按照以下語法使用回撥函式。

function func_name(callback) {
   // function body
   callback();
}
func_name(callback); // Function invocation
OR
func_name(() => {
   // Callback function body
})

在上述語法中，我們將“callback”作為 func_name() 函式的引數傳遞。

如上述語法所示，您還可以將箭頭函式或匿名函式作為回撥函式傳遞。

示例

在下面的程式碼中，我們將 multiply() 函式作為 sum() 函式的引數傳遞。

在 sum() 函式中，我們在最後呼叫回撥函式。

<html>
<body>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      function multiply(a) {
         let m = a * 4;
         output.innerHTML = "The result is " + m + ".<br>";
      }
      function sum(a, b, callback) {
         let c = a + b;
         callback(c); // Invoking the callback funciton
      }
      sum(4, 8, multiply); // Passing multiply function as a callback
   </script>
</body>
</html>

輸出

The result is 48.

將匿名函式作為回撥傳遞

示例

在下面的程式碼中，我們定義了 mathOperations() 函式，該函式將回調函式作為引數。

我們在 mathOperations() 函式內部呼叫回撥函式並獲取其返回值。

在呼叫 mathOperations() 函式時，我們傳遞了不同的匿名函式作為引數。這樣，您可以使用回撥函式控制要在特定函式內部執行的函式。

<html>
<body>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      function mathOperation(a, b, callback) {
         let result = callback(a, b);
         output.innerHTML += "The result is " + result + ".<br>";
      }
      mathOperation(10, 20, function (a, b) {
         return a + b; // Callback function to add numbers
      });
      mathOperation(20, 10, function (a, b) {
         return a - b; // Callback function to subtract numbers
      });
      mathOperation(10, 20, function (a, b) {
         return a * b; // Callback function to multiply numbers
      });
   </script>
</body>
</html>

輸出

The result is 30.
The result is 10.
The result is 200.

回撥函式的必要性

現在，讓我們瞭解回撥函式在即時開發中的必要性。

JavaScript 是一種單執行緒程式語言。因此，它逐行執行程式碼。當您需要從 API 獲取資料、載入影像或執行任何非同步操作時，它可能需要時間並阻塞其他程式碼的執行。

在這種情況下，您可以使用回撥函式來執行必須在非同步操作之後執行的程式碼，並且您可以執行其他程式碼而不會阻塞它。

例如，您正在發出 API 請求，並且需要 API 資料用於驗證目的。因此，您可以在回撥函式中執行資料驗證並繼續執行其他任務。

讓我們使用 setTimeOut() 方法來理解它。

示例

在下面的程式碼中，我們使用 setTimeOut() 方法編寫非同步程式碼。

它在延遲 500 毫秒後執行 printMessage() 函式。我們將 printMessage() 函式作為 setTimeOut() 方法的回撥傳遞。

在輸出中，您可以觀察到指令碼在沒有阻塞的情況下執行，並且它在 500 毫秒後執行 printMessage() 函式。

<html>
<body>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      output.innerHTML += "Start of the program. <br>";
      setTimeout(printMessage, 500); // Asynchronous code
      function printMessage() {
         output.innerHTML += "In the printMessage() function. <br>";
      }
      output.innerHTML += "End of the program. <br>";
   </script>
</body>
</html>

輸出

Start of the program.
End of the program.
In the printMessage() function.

帶有內建方法的回撥函式

許多內建 JavaScript 方法將回調函式作為引數，以在方法執行完成後執行自定義 JavaScript 程式碼。

在這裡，我們將檢視 2 到 3 個內建方法，這些方法將回調函式作為引數並附帶示例。

帶有回撥函式的 JavaScript array.sort() 方法

array.sort() 方法用於對陣列元素進行排序。預設情況下，它按升序對陣列元素進行排序。如果要按降序或任何自定義順序對陣列元素進行排序，則可以將回調函式作為引數傳遞。

語法

請按照以下語法使用 array.sort() 方法

arr.sort(callback);

array.sort() 方法可以選擇性地將回調函式作為引數。回撥函式應返回 0、1 或 -1。

示例

在下面的程式碼中，我們定義了包含數字值的陣列。首先，我們使用了沒有回撥函式的 sort() 方法。您可以看到它按升序對陣列進行排序。

之後，我們將匿名函式作為 sort() 方法的回撥函式傳遞。回撥函式返回元素 b 和 a 之間的差值，以便按降序對陣列進行排序。

<html>
<body>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      let arr = [23, 21, 56, 11, 10, 7, 8];
      output.innerHTML += "The sorted array is - " + arr.sort();
      
      // Sorting array in descending order
      let sorted = arr.sort(function (a, b) {
         return b - a;
      });
      output.innerHTML += "<br>The sorted array in descending order is - " + sorted;
   </script>
</body>
</html>

輸出

The sorted array is - 10,11,21,23,56,7,8
The sorted array in descending order is - 56,23,21,11,10,8,7

帶有回撥函式的 JavaScript array.filter() 方法

array.filter() 方法用於過濾陣列元素。它接收一個回撥函式作為引數。如果回撥函式返回 true，則過濾該元素。否則，跳過該陣列元素。

語法

請按照以下語法使用 array.filter() 方法。

Array.filter(callback);

回撥函式必須返回布林值。

示例

在下面的程式碼中，我們將 filterCallback() 函式作為 filter() 方法的回撥函式傳遞。如果數字為偶數，則 filterCallback() 函式返回布林值。

最後，您可以在輸出中看到過濾後的偶數。

<html>
<body>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      let arr = [23, 21, 56, 11, 10, 7, 8];
      let eventNums = arr.filter(filtercallback);

      function filtercallback(element) {
         return element % 2 == 0;
      }
      output.innerHTML += "The original array is: " + arr + "<br>";
      output.innerHTML += "The even numbers are: " + eventNums;
   </script>
</body>
</html>

輸出

The original array is: 23,21,56,11,10,7,8
The even numbers are: 56,10,8

帶有事件的回撥函式

您可以在 JavaScript 中使用 addEventListner() 方法來監聽事件。addEventListener() 方法將回調函式作為第二個引數。

每當網頁上觸發指定的事件時，它都會執行回撥函式。

語法

請按照以下語法使用 addEventListener() 方法。

Element.addEventListener(event, callback);

在上面的語法中，event 是一個表示事件名稱的字串，callback 是一個在事件觸發時應執行的函式。

示例

在下面的程式碼中，我們建立了一個按鈕。

在 JavaScript 中，我們使用其 ID 訪問了按鈕並添加了點選事件。

每當使用者點選按鈕時，它都會列印訊息。

<html>
<body>
   <button id = "btn"> Click Me </button>
   <p id = "output"> </p>
   <script>
      let output = document.getElementById('output');
      let button = document.getElementById('btn');
      button.addEventListener('click', function () {
         output.innerHTML = 'You have clicked the button. <br>';
      });
   </script>
</body>
</html>

輸出

巢狀回撥和回撥地獄

您可以像 JavaScript 中的巢狀迴圈或 if-else 語句一樣擁有巢狀回撥函式。如果第一個函式依賴於第二個函式的資料，而第二個函式依賴於第三個函式的資料，則您可能需要巢狀回撥函式。

讓我們透過下面的示例來理解它。

示例

asyncTask() 函式在下面的程式碼中完成任務並呼叫作為引數傳遞的回撥函式。

之後，我們呼叫了 asyncTask() 函式並將回撥函式作為第三個引數傳遞。在回撥函式中，我們再次呼叫了 asyncTask() 函式並將回撥函式作為第三個引數傳遞。

這樣，我們在 3 個巢狀級別使用了回撥函式。

<html>
<body>
   <div id = "output"> </div>
   <script>
      let output = document.getElementById('output');
      function asyncTask(taskName, duration, callback) {
         output.innerHTML += "Task started " + taskName + "<br/>"
         setTimeout(() => {
            output.innerHTML += 'Completed ' + taskName + '<br/>';
            callback();
         }, duration);
      }
      
      // Task 1
      asyncTask('Task 1', 1000, () => {
      
         // Task 2
         asyncTask('Task 2', 1500, () => {
         
            // Task 3
            asyncTask('Task 3', 1000, () => {
               output.innerHTML += "All tasks completed";
            });
         });
      });
   </script>
</body>
</html>

輸出

Task started Task 1
Completed Task 1
Task started Task 2
Completed Task 2
Task started Task 3
Completed Task 3
All tasks completed

由於其巢狀回撥的複雜語法，它也被稱為回撥地獄。

每當您需要使用巢狀回撥函式時，可以使用 Promise 或 async/await 來編寫更簡單的程式碼。

在接下來的章節中，您將學習 Promise 和 async/await 來處理非同步操作。

列印頁面