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()方法在指定时间后执行代码块。

此处,在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() 函数的执行。

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

Made with ❤️ in Chengdu. Copyright reserved 2019-2022.

蜀ICP备20006366号-1