¿Cuáles son las funciones de devolución de llamada en JavaScript??

Si es un programador, probablemente haya oído hablar de funciones, que son un conjunto de declaraciones que realizan una acción y devuelven una salida, pero cuáles son las funciones de devolución de llamada?

La función de devolución de llamada es un concepto extremadamente importante de JavaScript y se usa ampliamente en promesas, oyentes de eventos, matrices y mucho más.

Repasaremos qué son las funciones de devolución de llamada y cómo usarlas en JavaScript en este tutorial, así como también hablaremos sobre las funciones de devolución de llamada sincrónicas y asincrónicas. Para tener conceptos claros y profundos de funciones de devolución de llamada también implementaremos algunos ejemplos.

Función de devolución de llamada

Una función de devolución de llamada es una función que se pasa por primera vez como un argumento para alguna otra función y debe ejecutarse después de las declaraciones escritas en esa definición de función y, como su nombre lo indica, se ejecuta más adelante dentro de la función. Para ponerlo en palabras simples, se ejecuta una función de devolución de llamada una vez que se procesa el efecto actual.

Sintaxis para escribir una función de devolución de llamada en JavaScript

La sintaxis básica es:

función nameFunc (callbackfunc)
callbackfunc ();

Esto es un Función 'NameFunc ()' que requiere un Función 'CallbackFunc ()' como argumento. El Función 'CallbackFunc ()' se llama desde dentro del Función 'NameFunc ()' Entonces es una función de devolución de llamada de hecho.

Ejemplo 1

Supongamos que queremos consolar.Registre un mensaje después de 2 segundos.

función mensaje ()
consola.log ("Hola mundo después de 2 segundos");

SetTimeOut (Mensaje, 2000);

El función setTimeOut () es un método incorporado de JavaScript que toma un temporizador y una función de devolución de llamada como argumento. Ahora la función de mensaje (una función de devolución de llamada) solo se llamará y se ejecutará cuando el temporizador caducará.

En el código anterior, el mensaje de la función () se pasa como argumento y se llama después de 2000 milisegundos (2 segundos). Ahora para relacionar esto con la función de devolución de llamada, se llamó a la función Message () después de 2 segundos. No se ejecutó antes de esos 2 segundos. Por lo tanto, es una función de devolución de llamada.

Necesidad de funciones de devolución de llamada?

Debes estar pensando por qué incluso necesitamos funciones de devolución de llamada. La respuesta es simple. JavaScript es un lenguaje secuencial o de un solo subproceso que significa que se ejecuta secuencialmente la línea por línea.

JavaScript no espera una respuesta antes de pasar a la siguiente línea. Seguirá ejecutando y escuchando otros eventos o líneas de código.

Por ejemplo:

Ejemplo2

Supongamos que estamos registrando 1 y 2 de dos funciones diferentes a la consola:

función firstMessage ()
consola.log ("1");

función SecondMessage ()
consola.log ("2");

primer mensaje();
segundoMessage ();

Producción:

1
2

Como se esperaba, la función primer mensaje() se ejecuta primero y luego el Función SecondMessage () es ejecutado.

Ejemplo3

Supongamos que el Método FirstMessage () comprende una solicitud de API para recuperar datos de un servidor. Tendremos que esperar la respuesta/respuesta del servidor, por lo tanto, utilizemos el método incorporado settimeut una vez más.

Esta vez retrasaremos la solicitud por 3 segundos para ver cómo podemos solicitar una solicitud de búsqueda de API.

función firstMessage ()
// función de tiempo de espera para retrasar la solicitud
setTimeOut (function ()
consola.log ("1");
, 3000);

función SecondMessage ()
consola.log ("2");

primer mensaje();
segundoMessage ();

En este código, acabamos de mover la consola.log ("1"); dentro de función setTimeOut ().

Ahora lo que es realmente interesante es que cuando ejecute este código, verá que el 2 se mostrará primero en la consola:

Después de 3 segundos, se mostrará el 1:

Como podemos ver, el Función FirstMessage () fue llamado primero y luego el Función SecondMessage () fue llamado. Sin embargo, no podemos ver el resultado en la secuencia que llamamos nuestra función.

No es que JavaScript no devolviera nuestro código secuencialmente, es solo que JavaScript no esperó el Función FirstMessage () ejecutar por completo y comenzar a ejecutar el Función SecondMessage ().

Este ejemplo se colocó únicamente aquí para mostrarle por qué necesitamos funciones de devolución de llamada. Funciones de devolución de llamada Permítanos asegurarnos de que algún código no se ejecute hasta que nuestro código requerido haya sido ejecutado.

Tipos de funciones de devolución de llamada

Ahora que hemos visto qué son las devoluciones de llamada, cómo se usan y por qué son importantes, veamos los dos tipos de funciones de devolución de llamada.

Función de devolución de llamada sincrónica

Las funciones de devolución de llamada sincrónica se ejecutan/ejecutan al mismo tiempo que la función de orden superior que usa la función de devolución de llamada y está bloqueando principalmente; Completa su tarea y luego le da el control a otra función o línea de código.

Esto es beneficioso, ya que supongamos que está obteniendo artículos de una API. Desea que su página se cargue una vez que obtenga algunos datos de una API. A menos que se obtenga la respuesta de la API, todo el sitio tiene que esperar.

El ejemplo 2 indicado anteriormente eran funciones sincrónicas, ya que ejecutó la línea por línea y una vez que la primera función se ejecutó solo entonces el control se dio a la segunda función I-e SecondMessage () función.

Función de devolución de llamada asincrónica

Asincrónico es completamente opuesto a sincrónico, ya que funciona paralelo con la persona que llama de la función y la función de devolución de llamada. Funciones asincrónicas no son bloqueados, ya que se ejecutan o ejecutan más tarde que la función de orden superior.

El ejemplo 3 proporcionado anteriormente era una función de devolución de llamada asincrónica como llamamos el Función FirstMessage () Pero esperó dos segundos. En esos dos segundos, devolvió el control y el Función SecondMessage () Fue ejecutado. Una vez que se acabó los tres segundos, el Función FirstMessage () Empecé a ejecutar nuevamente.

Conclusión

A función de devolución de llamada es una función que se suministra por primera vez como un argumento para alguna otra función y debe ejecutarse después de las declaraciones escritas en esa definición de función. Aprendimos qué son las funciones de devolución de llamada y cómo usarlas en JavaScript, así como por qué las funciones de devolución de llamada son importantes y cuáles son los dos tipos de funciones de devolución de llamada en esta publicación.