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 来处理异步操作。

打印页面