📌  相关文章
📜  JavaScript回调函数

📅  最后修改于: 2020-09-27 04:13:57             🧑  作者: Mango

在本教程中，您将借助示例学习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() 函数的执行。

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