¿Por qué no se modifica mi variable después de modificarla dentro de una función? - Referencia de código asíncrono

Dados los siguientes ejemplos, ¿por qué outerScopeVarno 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 undefineden 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.

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:

• La respuesta de @Felix Kling a "¿Cómo devuelvo la respuesta de una llamada asincrónica?" . Vea su excelente respuesta explicando flujos sincrónicos y asincrónicos, así como la sección "Código de reestructuración".
  @Benjamin Gruenbaum también se ha esforzado mucho por 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 el comportamiento común primero. En todos los ejemplos, outerScopeVarse 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.onloadse puede llamar en algún momento en el futuro , cuando (y si) la imagen se haya cargado correctamente.
• setTimeoutse 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 cancelado clearTimeout. Nota: incluso cuando se usa 0como retraso, todos los navegadores tienen un límite de tiempo de espera mínimo (especificado en 4 ms en la especificación HTML5).
• $.postLa 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.readFileSe 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 el interior de esta función asincrónica. Por ejemplo, mover los alertsys console.logtambié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:

var outerScopeVar;
helloCatAsync();
alert(outerScopeVar);

function helloCatAsync() {
    setTimeout(function() {
        outerScopeVar = 'Nya';
    }, Math.random() * 2000);
}

Nota: estoy usando setTimeoutcon un retraso aleatorio como una función asíncrona genérico, el mismo ejemplo se aplica a Ajax, readFile, onloady 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 outerScopeVarque 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):

// 1. Call helloCatAsync passing a callback function,
//    which will be called receiving the result from the async operation
helloCatAsync(function(result) {
    // 5. Received the result from the async function,
    //    now do whatever you want with it:
    alert(result);
});

// 2. The "callback" parameter is a reference to the function which
//    was passed as argument from the helloCatAsync call
function helloCatAsync(callback) {
    // 3. Start async operation:
    setTimeout(function() {
        // 4. Finished async operation,
        //    call the callback passing the result as argument
        callback('Nya');
    }, Math.random() * 2000);
}

Fragmento de código del ejemplo anterior:

// 1. Call helloCatAsync passing a callback function,
//    which will be called receiving the result from the async operation
console.log("1. function called...")
helloCatAsync(function(result) {
    // 5. Received the result from the async function,
    //    now do whatever you want with it:
    console.log("5. result is: ", result);
});

// 2. The "callback" parameter is a reference to the function which
//    was passed as argument from the helloCatAsync call
function helloCatAsync(callback) {
    console.log("2. callback here is the function passed as argument above...")
    // 3. Start async operation:
    setTimeout(function() {
    console.log("3. start async operation...")
    console.log("4. finished async operation, calling the callback, passing the result...")
        // 4. Finished async operation,
        //    call the callback passing the result as argument
        callback('Nya');
    }, Math.random() * 2000);
}

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 helloCatAsyncimplementació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 returnun 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 returnun 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:

• Promesas de JavaScript - Rocas HTML5
• Te estás perdiendo el punto de las promesas - domenic.me

Más material de lectura sobre asincronía de JavaScript

• The Art of Node - Callbacks explica muy bien el código asíncrono y las devoluciones de llamada con ejemplos de Vanilla JS y el código Node.js también.

Nota: He marcado esta respuesta como Community Wiki, por lo tanto, ¡cualquiera con al menos 100 reputaciones puede editarla y mejorarla! Por favor, siéntase libre de mejorar esta respuesta, o envíe una respuesta completamente nueva si así lo desea.

Quiero convertir esta pregunta en un tema canónico para responder a problemas de asincronía que no están relacionados con Ajax (hay cómo devolver la respuesta de una llamada AJAX para eso), por lo tanto, este tema necesita su ayuda para ser lo más bueno y útil posible !

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:

Yo : Hola Bob, necesito saber cómo engañamos al bar la semana pasada. Jim quiere un informe al respecto, y tú eres el único que conoce los detalles al respecto.

Bob : Claro, ¿pero me llevará unos 30 minutos?

Yo : Eso es genial Bob. ¡Llámame cuando tengas la informació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;

Yo : Hola Bob, necesito saber cómo engañamos al bar la semana pasada. Jim quiere un informe al respecto, y tú eres el único que conoce los detalles al respecto.

Bob : Claro, ¿pero me llevará unos 30 minutos?

Yo : Eso es genial Bob. Esperaré.

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 del 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 .

var outerScopeVar;    
var img = document.createElement('img');

// Here we register the callback function.
img.onload = function() {
    // Code within this function will be executed once the image has loaded.
    outerScopeVar = this.width;
};

// But, while the image is loading, JavaScript continues executing, and
// processes the following lines of JavaScript.
img.src = 'lolcat.png';
alert(outerScopeVar);

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 decir alert(outerScopeVar).

Por eso vemos que se muestra la alerta undefined; ya que alert()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 la outerScopeVarvariable declarada como una variable global.

var img = document.createElement('img');

img.onload = function() {
    var localScopeVar = this.width;
    alert(localScopeVar);
};

img.src = 'lolcat.png';

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 arreglar 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, pero eval()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;

function getWidthOfImage(src) {
    var outerScopeVar;

    var img = document.createElement('img');
    img.onload = function() {
        outerScopeVar = this.width;
    };
    img.src = src;
    return outerScopeVar;
}

var width = getWidthOfImage('lolcat.png');
alert(width);

Sin embargo, ahora sabemos que return outerScopeVarsucede inmediatamente; antes de que la onloadfunción de devolución de llamada haya actualizado la variable. Esto lleva a getWidthOfImage()regresar undefinedy undefinedser 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;

function getWidthOfImage(src, cb) {     
    var img = document.createElement('img');
    img.onload = function() {
        cb(this.width);
    };
    img.src = src;
}

getWidthOfImage('lolcat.png', function (width) {
    alert(width);
});

... como antes, tenga en cuenta que hemos podido eliminar las variables globales (en este caso width).

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:

function getMessage() {
  var outerScopeVar;
  setTimeout(function() {
    outerScopeVar = 'Hello asynchronous world!';
  }, 0);
  return outerScopeVar;
}
console.log(getMessage());

undefinedse registra en este caso porque getMessageregresa antes de que setTimeoutse llame la devolución de llamada y se actualiza outerScopeVar.

Las dos formas principales de resolverlo son mediante devoluciones de llamada y promesas :

Devoluciones de llamada

El cambio aquí es que getMessageacepta un callbackparámetro que se llamará para entregar los resultados al código de llamada una vez que esté disponible.

function getMessage(callback) {
  setTimeout(function() {
    callback('Hello asynchronous world!');
  }, 0);
}
getMessage(function(message) {
  console.log(message);
});

Promesas

Las promesas proporcionan una alternativa que es más flexible que las devoluciones de llamada porque se pueden combinar 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 .

function getMessage() {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      resolve('Hello asynchronous world!');
    }, 0);
  });
}

getMessage().then(function(message) {
  console.log(message);  
});

jQuery diferidos

jQuery proporciona una funcionalidad similar a las promesas con sus diferidos.

function getMessage() {
  var deferred = $.Deferred();
  setTimeout(function() {
    deferred.resolve('Hello asynchronous world!');
  }, 0);
  return deferred.promise();
}

getMessage().done(function(message) {
  console.log(message);  
});

asíncrono / esperar

Si su entorno JavaScript incluye soporte para asyncy await(como Node.js 7.6+), puede usar promesas sincrónicamente dentro de las asyncfunciones:

function getMessage () {
    return new Promise(function(resolve, reject) {
        setTimeout(function() {
            resolve('Hello asynchronous world!');
        }, 0);
    });
}

async function main() {
    let message = await getMessage();
    console.log(message);
}

main();

Para decir lo obvio, la copa representa outerScopeVar.

Las funciones asincrónicas son como ...

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 $.getor $.posto $.ajax) son asíncronas.

Considerando tu ejemplo

var outerScopeVar;  //line 1
$.post('loldog', function(response) {  //line 2
    outerScopeVar = response;
});
alert(outerScopeVar);  //line 3

La ejecución del código comienza desde la línea 1, declara la variable y los desencadenantes 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 outerScopeVarsolo se establecerá después de esos 10 segundos.

Para probar,

var outerScopeVar; //line 1
$.post('loldog', function(response) {  //line 2, takes 10 seconds to complete
    outerScopeVar = response;
});
alert("Lets wait for some time here! Waiting is fun");  //line 3
alert(outerScopeVar);  //line 4

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,

var outerScopeVar;
$.post('loldog', function(response) {
    outerScopeVar = response;
    alert(outerScopeVar);
});

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.

En todos estos escenarios outerScopeVarse 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ón img.onloadespera 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 asíncrono que se agregará a la última posición de Event Queueejecució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