JavaScript 回调函数

    在本教程中，您将借助示例了解 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() 方法会在指定时间后执行一段代码。
    在这里，greet() 函数在2000毫秒（2秒）后被调用。在此等待期间，将执行 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() 函数的执行。
    注意：当您必须等待需要时间的结果时，回调函数很有用。例如，数据来自服务器，因为数据到达需要时间。

    上一教程 ：JS setTimeout()                                          下一教程 ：JS Promise

参考文档

[1] Parewa Labs Pvt. Ltd. (2022, January 1). Getting Started With JavaScript, from Parewa Labs Pvt. Ltd: https://www.programiz.com/javascript/callback