Digamos que llamas a tu amigo y le pides alguna información, digamos, la dirección postal de un amigo mutuo que has perdido. Tu amigo no tiene esta información memorizada, así que tiene que encontrar su libreta de direcciones y buscar la dirección. Esto puede llevarle unos minutos. Hay diferentes estrategias para proceder:
- Quédate en el teléfono con él y espera mientras él está mirando.
- Le dices a tu amigo que te llame cuando tenga la información. Mientras tanto, puedes enfocar toda tu atención en las otras tareas que necesitas hacer, como doblar la ropa y lavar los platos.
En JavaScript, podemos crear una función de llamada que pasamos a una función asíncrona, que será llamada una vez que se complete la tarea.
Es decir, en lugar de
12var data =getData();console.log("Los datos son: "+ datos";javascript
pasaremos en una función de devolución de llamada a getData:
123getData(function(data){console.log("Los datos son: "+ datos);});javascript
Por supuesto, ¿cómo sabe getData que estamos pasando en una función? ¿Cómo se llama, y cómo se puebla el parámetro de datos? En este momento, nada de esto está sucediendo; necesitamos cambiar la función getData también, para que sepa que una función de llamada de retorno es su parámetro.
12345functiongetData(callback){ $.get("ejemplo.php",function(response){callback(response);});}javascript
Notarán que ya pasamos en una función de devolución de llamada a $.get antes, quizás sin darnos cuenta de lo que era. También pasamos en una llamada de retorno a la función setTimeout(llamada de retorno, retraso) en el primer ejemplo.
Dado que $.get ya acepta una llamada, no necesitamos crear manualmente otra en getData, sólo podemos pasar directamente la llamada que se nos dio:
123functiongetData(callback){ $.get("ejemplo.php", callback);}javascript
Las funciones de retrollamada se usan muy frecuentemente en JavaScript y, si has pasado algún tiempo escribiendo código en JavaScript, es muy probable que las hayas usado (quizás de forma inadvertida). Casi todas las aplicaciones web harán uso de las llamadas de retorno, ya sea a través de eventos (por ejemplo, window.onclick), setTimeout, y setInterval, o peticiones AJAX.