JavaScript - Callback 回调函数

什么是回调函数?

JavaScript 中的回调函数通常作为另一个函数的参数传递。在这里，不要将回调视为名称或关键字。回调函数名称可以是任何有效的标识符。

回调函数可以在父函数完成特定任务后在父函数内部调用。它主要用于处理异步操作。

语法

您可以按照以下语法使用回调函数。

function func_name(callback) {
   // 函数主体
   callback();
}
func_name(callback); // 函数调用
或
func_name(() => {
   // 回调函数体
})

在上述语法中，我们将回调函数作为 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); // 调用回调函数
      }
      sum(4, 8, multiply); // 将乘法函数作为回调传递
   </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; // 添加数字的回调函数
      });
      mathOperation(20, 10, function (a, b) {
         return a - b; // 回调函数来减去数字
      });
      mathOperation(10, 20, function (a, b) {
         return a * b; // 回调函数来乘以数字
      });
   </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();
      
      // 按降序对数组进行排序
      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 中的 addEventListener() 方法来监听事件。addEventListener() 方法将回调函数作为第二个参数。

每当网页上触发指定事件时，它都会执行回调函数。

语法

请按照以下语法使用 addEventListener() 方法。

Element.addEventListener(event, callback);

在上述语法中，事件是表示事件名称的字符串，回调是在事件触发时应执行的函数。

示例

在下面的代码中，我们创建了按钮。

在 JavaScript 中，我们使用按钮的 ID 访问按钮并添加了 click 事件。

每当用户点击按钮时，它都会打印消息。

<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);
      }
      
      // 任务 1
      asyncTask('Task 1', 1000, () => {
      
         // 任务 2
         asyncTask('Task 2', 1500, () => {
         
            // 任务 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 来处理异步操作。