Dados los siguientes ejemplos, ¿por qué outerScopeVar
no está definido en todos los casos?
var outerScopeVar;
var img = document.createElement('img');
img.onload = function() {
outerScopeVar = this.width;
};
img.src = 'lolcat.png';
alert(outerScopeVar);
var outerScopeVar;
setTimeout(function() {
outerScopeVar = 'Hello Asynchronous World!';
}, 0);
alert(outerScopeVar);
// Example using some jQuery
var outerScopeVar;
$.post('loldog', function(response) {
outerScopeVar = response;
});
alert(outerScopeVar);
// Node.js example
var outerScopeVar;
fs.readFile('./catdog.html', function(err, data) {
outerScopeVar = data;
});
console.log(outerScopeVar);
// with promises
var outerScopeVar;
myPromise.then(function (response) {
outerScopeVar = response;
});
console.log(outerScopeVar);
// geolocation API
var outerScopeVar;
navigator.geolocation.getCurrentPosition(function (pos) {
outerScopeVar = pos;
});
console.log(outerScopeVar);
¿Por qué sale undefined
en todos estos ejemplos? No quiero soluciones, quiero saber por qué sucede esto.
Nota: Esta es una pregunta canónica para la asincronía de JavaScript . Siéntase libre de mejorar esta pregunta y agregar ejemplos más simplificados con los que la comunidad pueda identificarse.
javascript
asynchronous
Fabrício Matté
fuente
fuente
Respuestas:
Respuesta de una palabra: asincronía .
Prefacio
Este tema se ha iterado al menos un par de miles de veces, aquí, en Stack Overflow. Por lo tanto, en primer lugar, me gustaría señalar algunos recursos extremadamente útiles:
Respuesta de @Felix Kling a "Cómo devolver la respuesta de una llamada asincrónica" . Vea su excelente respuesta explicando flujos síncronos y asíncronos, así como la sección "Código de reestructuración".
@Benjamin Gruenbaum también ha puesto mucho esfuerzo en explicar la asincronía en el mismo hilo.
La respuesta de @Matt Esch a "Obtener datos de fs.readFile" también explica la asincronía extremadamente bien de una manera simple.
La respuesta a la pregunta en cuestión.
Tracemos primero el comportamiento común. En todos los ejemplos,
outerScopeVar
se modifica dentro de una función . Es evidente que esa función no se ejecuta de inmediato, se asigna o se pasa como argumento. Eso es lo que llamamos una devolución de llamada .Ahora la pregunta es, ¿cuándo se llama esa devolución de llamada?
Depende del caso. Intentemos rastrear un comportamiento común nuevamente:
img.onload
se puede llamar en algún momento en el futuro , cuando (y si) la imagen se haya cargado correctamente.setTimeout
se puede llamar en algún momento en el futuro , después de que la demora haya expirado y el tiempo de espera no haya sido canceladoclearTimeout
. Nota: incluso cuando se usa0
como retraso, todos los navegadores tienen un límite de tiempo de espera mínimo (especificado en 4 ms en la especificación HTML5).$.post
La devolución de llamada de jQuery se puede llamar en algún momento en el futuro , cuando (y si) la solicitud de Ajax se haya completado con éxito.fs.readFile
Se puede llamar a Node.js en algún momento en el futuro , cuando el archivo se haya leído correctamente o se haya producido un error.En todos los casos, tenemos una devolución de llamada que puede ejecutarse en algún momento en el futuro . Este "en algún momento en el futuro" es lo que llamamos flujo asíncrono .
La ejecución asincrónica se elimina del flujo sincrónico. Es decir, el código asincrónico nunca se ejecutará mientras se ejecuta la pila de código síncrono. Este es el significado de JavaScript con un solo subproceso.
Más específicamente, cuando el motor JS está inactivo, sin ejecutar una pila de (a) código síncrono, sondeará los eventos que pueden haber desencadenado devoluciones de llamada asincrónicas (por ejemplo, tiempo de espera expirado, respuesta de red recibida) y las ejecutará una tras otra. Esto se considera como Event Loop .
Es decir, el código asincrónico resaltado en las formas rojas dibujadas a mano puede ejecutarse solo después de que se haya ejecutado todo el código síncrono restante en sus respectivos bloques de código:
En resumen, las funciones de devolución de llamada se crean sincrónicamente pero se ejecutan de forma asincrónica. Simplemente no puede confiar en la ejecución de una función asincrónica hasta que sepa que se ha ejecutado, y ¿cómo hacer eso?
Es simple, de verdad. La lógica que depende de la ejecución de la función asincrónica debe iniciarse / invocarse desde esta función asincrónica. Por ejemplo, mover los
alert
sysconsole.log
también dentro de la función de devolución de llamada generaría el resultado esperado, porque el resultado está disponible en ese punto.Implementando su propia lógica de devolución de llamada
A menudo necesita hacer más cosas con el resultado de una función asincrónica o hacer cosas diferentes con el resultado dependiendo de dónde se haya llamado la función asincrónica. Veamos un ejemplo un poco más complejo:
Nota: estoy usando
setTimeout
con un retraso aleatorio como una función asíncrona genérico, el mismo ejemplo se aplica a Ajax,readFile
,onload
y cualquier otro flujo asíncrono.Este ejemplo claramente sufre el mismo problema que los otros ejemplos, no está esperando hasta que se ejecute la función asincrónica.
Vamos a abordarlo implementando un sistema de devolución de llamada propio. En primer lugar, nos deshacemos de ese feo
outerScopeVar
que es completamente inútil en este caso. Luego agregamos un parámetro que acepta un argumento de función, nuestra devolución de llamada. Cuando finaliza la operación asincrónica, llamamos a esta devolución de llamada pasando el resultado. La implementación (lea los comentarios en orden):Fragmento de código del ejemplo anterior:
Con mayor frecuencia en casos de uso real, la API DOM y la mayoría de las bibliotecas ya proporcionan la funcionalidad de devolución de llamada (la
helloCatAsync
implementación en este ejemplo demostrativo). Solo necesita pasar la función de devolución de llamada y comprender que se ejecutará fuera del flujo sincrónico, y reestructurar su código para acomodarlo.También notará que debido a la naturaleza asincrónica, es imposible que
return
un valor de un flujo asincrónico regrese al flujo sincrónico donde se definió la devolución de llamada, ya que las devoluciones de llamada asincrónicas se ejecutan mucho después de que el código sincrónico ya haya terminado de ejecutarse.En lugar de obtener
return
un valor de una devolución de llamada asincrónica, deberá utilizar el patrón de devolución de llamada o ... Promesas.Promesas
Aunque hay formas de mantener a raya el infierno de devolución de llamadas con vanilla JS, las promesas están creciendo en popularidad y actualmente se están estandarizando en ES6 (ver Promesa - MDN ).
Las promesas (también conocidas como futuros) proporcionan una lectura más lineal, y por lo tanto agradable, del código asincrónico, pero explicar su funcionalidad completa está fuera del alcance de esta pregunta. En cambio, dejaré estos excelentes recursos para los interesados:
Más material de lectura sobre asincronía de JavaScript
fuente
La respuesta de Fabricio es acertada; pero quería complementar su respuesta con algo menos técnico, que se centra en una analogía para ayudar a explicar el concepto de asincronía .
Una analogía ...
Ayer, el trabajo que estaba haciendo requería información de un colega. Lo llamé; así es como fue la conversación:
En este punto, colgué el teléfono. Como necesitaba información de Bob para completar mi informe, dejé el informe y fui a tomar un café, y luego recibí un correo electrónico. 40 minutos después (Bob es lento), Bob volvió a llamar y me dio la información que necesitaba. En este punto, reanudé mi trabajo con mi informe, ya que tenía toda la información que necesitaba.
Imagínese si la conversación hubiera sido así en su lugar;
Y me senté allí y esperé. Y esperé Y esperé Por 40 minutos. No haciendo nada más que esperar. Finalmente, Bob me dio la información, colgamos y completé mi informe. Pero había perdido 40 minutos de productividad.
Este es un comportamiento asincrónico versus síncrono
Esto es exactamente lo que está sucediendo en todos los ejemplos en nuestra pregunta. Cargar una imagen, cargar un archivo desde el disco y solicitar una página a través de AJAX son operaciones lentas (en el contexto de la informática moderna).
En lugar de esperar a que se completen estas operaciones lentas, JavaScript le permite registrar una función de devolución de llamada que se ejecutará cuando se complete la operación lenta. Mientras tanto, sin embargo, JavaScript continuará ejecutando otro código. El hecho de que JavaScript ejecute otro código mientras espera que se complete la operación lenta hace que el comportamiento sea asíncrono . Si JavaScript hubiera esperado a que se completara la operación antes de ejecutar cualquier otro código, este habría sido un comportamiento sincrónico .
En el código anterior, le pedimos que cargue JavaScript
lolcat.png
, que es una operación lenta . La función de devolución de llamada se ejecutará una vez que esta operación lenta haya terminado, pero mientras tanto, JavaScript seguirá procesando las siguientes líneas de código; es deciralert(outerScopeVar)
.Por eso vemos que se muestra la alerta
undefined
; ya quealert()
se procesa de inmediato, en lugar de después de que se haya cargado la imagen.Para arreglar nuestro código, todo lo que tenemos que hacer es mover el
alert(outerScopeVar)
código a la función de devolución de llamada. Como consecuencia de esto, ya no necesitamos laouterScopeVar
variable declarada como una variable global.Usted siempre ve una devolución de llamada se especifica como una función, porque esa es la única manera * en JavaScript para definir un código, pero no lo ejecuta hasta más tarde.
Por lo tanto, en todos nuestros ejemplos, el
function() { /* Do something */ }
es la devolución de llamada; Para solucionar todos los ejemplos, todo lo que tenemos que hacer es mover el código que necesita la respuesta de la operación allí.* Técnicamente puedes usarlo
eval()
también, peroeval()
es malo para este propósito¿Cómo hago esperar a la persona que llama?
Es posible que actualmente tenga un código similar a este;
Sin embargo, ahora sabemos que
return outerScopeVar
sucede inmediatamente; antes de que laonload
función de devolución de llamada haya actualizado la variable. Esto lleva agetWidthOfImage()
regresarundefined
yundefined
ser alertado.Para solucionar esto, debemos permitir que la función que llama
getWidthOfImage()
registre una devolución de llamada, luego mover la alerta del ancho para que esté dentro de esa devolución de llamada;... como antes, tenga en cuenta que hemos podido eliminar las variables globales (en este caso
width
).fuente
Aquí hay una respuesta más concisa para las personas que buscan una referencia rápida, así como algunos ejemplos que usan promesas y async / wait.
Comience con el enfoque ingenuo (que no funciona) para una función que llama a un método asincrónico (en este caso
setTimeout
) y devuelve un mensaje:undefined
se registra en este caso porquegetMessage
regresa antes de quesetTimeout
se llame la devolución de llamada y se actualizaouterScopeVar
.Las dos formas principales de resolverlo son mediante devoluciones de llamada y promesas :
Devoluciones de llamada
El cambio aquí es que
getMessage
acepta uncallback
parámetro que se llamará para entregar los resultados al código de llamada una vez que esté disponible.Promesas
Las promesas proporcionan una alternativa que es más flexible que las devoluciones de llamada porque pueden combinarse naturalmente para coordinar múltiples operaciones asíncronas. Un Promesas / A + implementación estándar se proporciona en forma nativa Node.js (0.12+) y muchos navegadores actuales, sino que también se implementa en bibliotecas como Bluebird y Q .
jQuery diferidos
jQuery proporciona una funcionalidad similar a las promesas con sus diferidos.
asíncrono / esperar
Si su entorno JavaScript incluye soporte para
async
yawait
(como Node.js 7.6+), entonces puede usar promesas sincrónicamente dentro de lasasync
funciones:fuente
function getMessage(param1, param2, callback) {...}
.async/await
muestra, pero me encuentro con problemas. En lugar de crear una instancia de anew Promise
, estoy haciendo una.Get()
llamada y, por lo tanto, no tengo acceso a ningúnresolve()
método. Por lo tanto, migetMessage()
está devolviendo la Promesa y no el resultado. ¿Podría editar un poco su respuesta para mostrar una sintaxis funcional para esto?.Get()
llamada. Probablemente sea mejor publicar una nueva pregunta.Para decir lo obvio, la copa representa
outerScopeVar
.Las funciones asincrónicas son como ...
fuente
Las otras respuestas son excelentes y solo quiero proporcionar una respuesta directa a esto. Solo limitando a llamadas asincrónicas jQuery
Todas las llamadas ajax (incluidas las
$.get
or$.post
o$.ajax
) son asíncronas.Considerando tu ejemplo
La ejecución del código comienza desde la línea 1, declara la variable y los disparadores y la llamada asíncrona en la línea 2 (es decir, la solicitud posterior) y continúa su ejecución desde la línea 3, sin esperar a que la solicitud posterior complete su ejecución.
Digamos que la solicitud de publicación tarda 10 segundos en completarse, el valor de
outerScopeVar
solo se establecerá después de esos 10 segundos.Para probar,
Ahora, cuando ejecute esto, recibirá una alerta en la línea 3. Ahora espere un momento hasta que esté seguro de que la solicitud de publicación ha devuelto algún valor. Luego, cuando hace clic en Aceptar, en el cuadro de alerta, la siguiente alerta imprimirá el valor esperado, porque lo esperó.
En el escenario de la vida real, el código se convierte en,
Todo el código que depende de las llamadas asincrónicas, se mueve dentro del bloque asincrónico, o al esperar las llamadas asincrónicas.
fuente
or by waiting on the asynchronous calls
¿Cómo se hace eso?En todos estos escenarios
outerScopeVar
se modifica o se le asigna un valor de forma asincrónica o sucede en un momento posterior (esperando o escuchando que ocurra algún evento), para lo cual la ejecución actual no esperará . Por lo tanto, todos estos casos el flujo de ejecución actual da como resultadoouterScopeVar = undefined
Analicemos cada ejemplo (marqué la parte que se llama de forma asíncrona o retrasada para que ocurran algunos eventos):
1)
Aquí registramos una lista de eventos que se ejecutará en ese evento en particular. Aquí se carga la imagen. Luego, la ejecución actual continúa con las siguientes líneas
img.src = 'lolcat.png';
y,alert(outerScopeVar);
mientras tanto, el evento puede no ocurrir. es decir, la funciónimg.onload
espera a que se cargue la imagen referida de forma asincrónica. Esto sucederá todo el siguiente ejemplo: el evento puede diferir.2)
Aquí el evento de tiempo de espera juega el papel, que invocará al controlador después del tiempo especificado. Aquí está
0
, pero aún registra un evento asincrónico que se agregará a la última posición deEvent Queue
ejecución, lo que hace que el retraso esté garantizado.3)
Esta vez ajax callback.
4)
El nodo se puede considerar como un rey de la codificación asincrónica. Aquí la función marcada se registra como un controlador de devolución de llamada que se ejecutará después de leer el archivo especificado.
5)
La promesa obvia (se hará algo en el futuro) es asíncrona. ver ¿Cuáles son las diferencias entre diferido, promesa y futuro en JavaScript?
https://www.quora.com/Whats-the-difference-between-a-promise-and-a-callback-in-Javascript
fuente