En este tutorial, aprenderá sobre las funciones de devolución de llamada de JavaScript con la ayuda de ejemplos.
Una función es un bloque de código que realiza una determinada tarea cuando se llama. Por ejemplo,
// function function greet(name) ( console.log('Hi' + ' ' + name); ) greet('Peter'); // Hi Peter
En el programa anterior, se pasa un valor de cadena como argumento a la greet()función.
En JavaScript, también puede pasar una función como argumento a una función. Esta función que se pasa como argumento dentro de otra función se llama función de devolución de llamada. Por ejemplo,
// 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);
Salida
Hola Peter, soy función de devolución de llamada
En el programa anterior, hay dos funciones. Al llamar a la greet()función, se pasan dos argumentos (un valor de cadena y una función).
La callMe()función es una función de devolución de llamada.
Beneficio de la función de devolución de llamada
El beneficio de usar una función de devolución de llamada es que puede esperar el resultado de una llamada de función anterior y luego ejecutar otra llamada de función.
En este ejemplo, usaremos el setTimeout()método para imitar el programa que tarda en ejecutarse, como los datos que vienen del servidor.
Ejemplo: programa con 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');
Salida
Hola john hola mundo
Como sabe, el método setTimeout () ejecuta un bloque de código después del tiempo especificado.
Aquí, la greet()función se llama después de 2000 milisegundos ( 2 segundos). Durante esta espera, sayName('John');se ejecuta. Es por eso que Hello John se imprime antes que Hello world.
El código anterior se ejecuta de forma asincrónica (la segunda función; sayName()no espera a que la primera función se greet()complete).
Ejemplo: uso de una función de devolución de llamada
En el ejemplo anterior, la segunda función no espera a que se complete la primera función. Sin embargo, si desea esperar el resultado de la llamada a la función anterior antes de que se ejecute la siguiente instrucción, puede usar una función de devolución de llamada. Por ejemplo,
// 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);
Salida
Hola mundo hola john
En el programa anterior, el código se ejecuta sincrónicamente. La sayName()función se pasa como argumento a la greet()función.
El setTimeout()método ejecuta la greet()función solo después de 2 segundos. Sin embargo, la sayName()función espera la ejecución de la greet()función.
Nota : La función de devolución de llamada es útil cuando tiene que esperar un resultado que lleva tiempo. Por ejemplo, los datos provienen de un servidor porque los datos tardan en llegar.
