JavaScript 回调函数

Question

在本教程中，您将借助示例学习 JavaScript 回调函数。

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

// function
function greet(name) {
    console.log('Hi' + ' ' + name);
}

greet('Peter'); // Hi Peter

在上述程序中， 字符串值作为参数传递给 greet() 函数。

在 JavaScript 中，您还可以将函数作为参数传递给函数 。即作为另一个函数的参数传递里面这个函数被调用回调函数。例如，

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

// callback function
function callMe() {
    console.log('I am callback function');
}

// passing function as an argument
greet('Peter', callMe);

输出

Hi Peter
I am callback function

在上面的程序中，有两个功能。在调用 greet() 函数，有两个参数：传递字符串值和函数 。

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

---

回调功能的好处

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

在此示例中，我们将使用 setTimeout() 方法来模仿需要花费时间来执行的程序，例如来自服务器的数据。

示例：使用 setTimeout() 进行编程

//  program that shows the delay in execution

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

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

// calling the function
setTimeout(greet, 2000);
sayName('John');

输出

Hello John
Hello world

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

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

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

---

示例：使用回调函数

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

// Callback Function Example
function greet(name, myFunction) {
    console.log('Hello world');

    // callback function
    // executed only after the greet() is executed
    myFunction(name);
}

// callback function
function sayName(name) {
    console.log('Hello' + ' ' + name);
}

// calling the function after 2 seconds
setTimeout(greet, 2000, 'John', sayName);

输出

Hello world
Hello John

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

setTimeout() 方法仅在 2 秒后执行 greet() 函数 。但是， sayName() 函数等待 greet() 函数的执行。

注意 ：当您必须等待花费时间的结果时，回调函数很有用。例如，数据来自服务器，因为数据到达需要时间。