JavaScript - 回调函数
在 JavaScript 中，function 被视为对象，这意味着它们可以像传递给 function 的任何其他值一样使用。因此，我们可以将它们作为参数传递给其他 function，就像处理变量或对象一样。当你将一个 function 作为参数传递时，它会在另一个 function 中被调用甚至执行。
这使得它非常灵活，因为你可以稍后决定运行哪个 function。当一个 function 以这种方式传递并在另一个 function 内部被调用时，它被称为 callback function。它基本上是一种控制某段代码何时以及如何运行的方式。
为什么我们需要 Callback Function？
- 当需要在其他 function 执行之后或在其他 function 执行过程中运行某段代码时，callback function 非常有用。你可以根据需要，在特定任务完成后简单地运行它。
- 它们在处理不立即发生、需要时间的事情时非常方便，例如从服务器加载数据或等待用户输入。在 JavaScript 中，这些被称为异步操作，而 callback function 经常用于管理这些异步 function。
- Callback function 也用于处理事件。例如，你有一个在用户点击按钮或页面加载时应该运行的 function。你可以将该 function 作为 callback 传递给事件监听器，当事件发生时它将被执行。
- Callback 允许你在不同情况下使用相同的 function，这使得处理各种任务变得容易，而无需重复相同的代码。
Callback Function 示例
以下是 JavaScript 中 callback function 的一个示例。在这个示例中，我们将一个 function 作为参数传递给另一个 function，并在 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 秒后，callback function 将被执行，输出将为：
First is displayed Second is displayed This is Callback function Last is displayed
带参数的 Callback Function
以下是 JavaScript 中带参数的 callback function 示例。在这个示例中，我们将一条消息传递给 callback function，然后显示它。
<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 秒后，callback function 将被执行，输出将为：
First is displayed Second is displayed Hello, World! Last is displayed
什么是 Callback Hell？
当你在函数中嵌套太多函数时，代码会变得杂乱且难以阅读和维护。当你有多个层级的嵌套 callback 来依次处理任务时，就会发生这种情况，这被称为 Callback Hell。
Callback Hell 示例
以下是 JavaScript 中 callback hell 的一个示例：
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!