跳到主要内容

JavaScript 回调函数

提示
  1. 回调函数定义：在JavaScript中，回调函数是作为参数传递给另一个函数的函数，用于在第一个函数执行完成后执行。
  2. 异步执行示例：使用setTimeout()方法可以模拟需要等待执行的操作，如服务器数据获取，其中回调函数在指定时间后执行。
  3. 同步执行的回调：回调函数可用于确保在前一个函数执行完毕后再执行后续函数，从而实现同步执行，尤其适用于处理需要时间等待的操作（如服务器响应）。

函数是一段执行特定任务的代码块，当被调用时执行。例如，

// 函数
function greet(name) {
  console.log("Hi" + " " + name);
}

greet("Peter"); // Hi Peter

在上面的程序中，一个字符串值作为参数传递给了 greet() 函数。

在JavaScript中，你也可以将一个函数作为参数传递给另一个函数。这个作为参数传递的函数称为回调函数。例如，

// 函数
function greet(name, callback) {
  console.log("Hi" + " " + name);
  callback();
}

// 回调函数
function callMe() {
  console.log("I am callback function");
}

// 将函数作为参数传递
greet("Peter", callMe);

输出

Hi Peter
I am callback function

在上述程序中，有两个函数。在调用 greet() 函数时，传递了两个参数（一个字符串值和一个函数）。

callMe() 函数是一个回调函数。

回调函数的好处​

使用回调函数的好处是，你可以等待前一个函数调用的结果，然后再执行另一个函数调用。

在这个例子中，我们将使用 setTimeout() 方法来模拟需要时间执行的程序，比如从服务器获取的数据。

示例：带有setTimeout()的程序​

// 显示执行中的延迟的程序

function greet() {
  console.log("Hello world");
}

function sayName(name) {
  console.log("Hello" + " " + name);
}

// 调用函数
setTimeout(greet, 2000);
sayName("John");

输出

Hello John
Hello world

如您所知，setTimeout() 方法在指定时间后执行代码块。

这里，greet() 函数在 2000 毫秒（2 秒）后被调用。在此期间，sayName('John'); 被执行。这就是为什么 "Hello John" 在 "Hello world" 之前被打印出来的原因。

上述代码是异步执行的（第二个函数；sayName() 并不等待第一个函数；greet() 完成）。

示例：使用回调函数​

在上面的示例中，第二个函数不等待第一个函数完成。然而，如果你想在执行下一条语句之前等待前一个函数调用的结果，你可以使用回调函数。例如，

// 回调函数示例
function greet(name, myFunction) {
  console.log("Hello world");

  // 回调函数
  // 只有在greet()执行后才执行
  myFunction(name);
}

// 回调函数
function sayName(name) {
  console.log("Hello" + " " + name);
}

// 在2秒后调用函数
setTimeout(greet, 2000, "John", sayName);

输出

Hello world
Hello John

在上述程序中，代码是同步执行的。sayName() 函数作为参数传递给了 greet() 函数。

setTimeout() 方法在 2 秒后才执行 greet() 函数。然而，sayName() 函数等待 greet() 函数的执行。

注意：当您需要等待一个需要时间的结果时，回调函数非常有用。例如，来自服务器的数据，因为数据到达需要时间。

最后于 更新