JavaScript - Callback 回调函数

在 JavaScript 中，函数被视为对象，这意味着它们的使用方式与传递给函数的任何其他值一样。因此，我们可以像处理变量或对象一样，将它们作为参数传递给其他函数。将函数作为参数传递时，它将被调用，甚至在另一个函数中执行。

这使得它非常灵活，因为您可以稍后决定应该运行哪个函数。当一个函数以这种方式传递，然后在另一个函数中被调用时，它被称为回调函数。它本质上是一种控制特定代码片段何时以及如何运行的方法。

为什么我们需要回调函数?

• 当我们必须在某个函数执行后或任何其他函数运行过程中运行某段代码时，回调函数非常有用。您可以根据需要在特定任务完成后直接运行。
• 它们可以方便地处理那些不会立即发生的事情，例如从服务器加载数据或等待用户输入等需要时间的操作。在 JavaScript 中，这些被称为异步操作，而回调函数通常用于管理这些异步函数。
• 回调函数也用于处理事件。例如，您有一个函数，应该在用户点击按钮或页面加载时运行。您可以将该函数作为回调传递给事件监听器，该函数将在事件发生时执行。
• 回调允许您在不同情况下使用相同的函数，这使得处理各种任务变得简单，而无需一遍又一遍地重复相同的代码。

回调函数示例

以下是 JavaScript 中回调函数的一个示例。在此示例中，我们将一个函数作为参数传递给另一个函数，然后在 5 秒后调用它。

<html>
   <head>
      <script>
         var callback = function(myCallback) {
            setTimeout(function() {
               myCallback();
            }, 5000);
         };
         
         document.write("First is displayed");
         document.write("<br>Second is displayed");
         
         callback(function() {
            document.write("This is Callback function");
         });
         document.write("<br>Last is displayed");
      </script>
   </head>
</html>

输出:

First is displayed
Second is displayed
Last is displayed

5秒后，回调函数将被执行，输出为:

First is displayed
Second is displayed
This is Callback function
Last is displayed

带参数的回调函数

以下是 JavaScript 中带参数的回调函数的示例。在此示例中，我们将一条消息传递给回调函数，然后显示该消息。

<html>
   <head>
      <script>
         var callback = function(myCallback) {
            setTimeout(function() {
               myCallback("Hello, World!");
            }, 5000);
         };
         
         document.write("First is displayed");
         document.write("<br>Second is displayed");
         
         callback(function(message) {
            document.write("<br>" + message);
         });
         document.write("<br>Last is displayed");
      </script>
   </head>

输出

以下是上述代码的输出:

First is displayed
Second is displayed
Last is displayed

5秒后，回调函数将被执行，输出为:

First is displayed
Second is displayed
Hello, World!
Last is displayed

什么是回调地狱?

当你在函数中嵌套过多函数时，代码会变得混乱，难以阅读和维护。当你使用多层嵌套回调来逐个处理同一个任务时，就会发生这种情况，这被称为回调地狱。

回调地狱示例

以下是 JavaScript 中回调地狱的一个示例:

function step1(callback) {
   setTimeout(function() {
      console.log("Step 1");
      callback();
   }, 1000);
}

function step2(callback) {
   setTimeout(function() {
      console.log("Step 2");
      callback();
   }, 1000);
}

function step3(callback) {
   setTimeout(function() {
      console.log("Step 3");
      callback();
   }, 1000);
}

step1(function() {
   step2(function() {
      step3(function() {
         console.log("Done!");
      });
   });
});

输出

以下是上述代码的输出:

Step 1
Step 2
Step 3
Done!