javaScript中的回调函数

什么是回调函数

回调函数是作为参数传递给另一个函数的函数。

让我们举个例子：我们有两个函数，函数 a 和函数 b。当调用函数 a 时，函数 b 作为参数传递给它。

function b(parameter){

} 
function a(parameter1, parameter2, b){
	b() 
} 
a(argument1, argument2, b);

这样我们就可以在a中调用函数b，函数b就是回调函数，回调函数将在另一个函数中运行

为什么需要回调函数

为什么我们需要一个函数来调用另一个函数？为什么我们需要函数a来调用函数b？

JavaScript 函数是按照它们被调用的顺序执行的，而不是按照它们定义的顺序执行的。

function firstDefined() {
  console.log("Hello");
}  

function secondDefined() {
  console.log("Goodbye");
}

secondDefined();  
firstDefined();

即使首先定义了“Hello”，上面的示例也会在“Hello”之前向控制台显示“Goodbye”。原因是因为secondDefined()首先被调用。

回调函数用于函数 a 必须在函数 b 执行之前等待函数 a 运行，因为函数 a 需要来自函数 b 的值。

假设我们没有回调函数！如果我们想要将两个数字相乘并在答案计算好时将答案显示到我们的 HTML 中，我们将在没有回调函数的情况下这样做。

<p> 10 x 2 = <span id="demo"></span></p>
<button onClick="display(answer)">计算</button>

<script>
function display(result) {
  document.getElementById("demo").innerHTML = result;
}

function calculate(num1, num2, display) {
  let product = num1 * num2;
  return product
};

let answer = calculate(10, 2);

</script>

在这里，我们调用了一个作为参数的函数display。是一个变量，存储一个乘以 10 和 2 的函数。结果为 20 并存储在 answer 变量中。因此，在按钮中，20 作为参数传递并映射到函数。20 映射到结果参数，然后在 HTML 中显示结果。``

另一种不使用回调函数的方法

<p> 10 x 2 = <span id="demo"></span></p>
<button onClick="calculate(10, 2)">计算</button>

<script>
function display(answer) {
  document.getElementById("demo").innerHTML = answer;
}

function calculate(num1, num2) {
  let answer = num1 * num2;
  display(answer);
};
</script>

带回调函数

<p> 10 x 2 = <span id="demo"></span></p>
<button onClick="calculate(10, 2, display)">计算</button>

<script>
function display(answer) {
  document.getElementById("demo").innerHTML = answer;
}

function calculate(num1, num2, display) {
  let product = num1 * num2;
  display(product);
};

</script>

单击按钮后，calculate将调用函数。它有 3 个参数，即 10、2 和dispaly。回调函数是display,它会在calculate函数中运行。

请注意，我们这里通过了参数将display在calculate中执行，这样的好处是啥？

1. 保证了先计算再展示
2. 因为形参可以接受任意的东西。那么这里就可以接受任意的函数。这样我们就将display函数和calculate解耦。