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

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);

// with observables
var outerScopeVar;
myObservable.subscribe(function (value) {
    outerScopeVar = value;
});
console.log(outerScopeVar);

// geolocation API
var outerScopeVar;
navigator.geolocation.getCurrentPosition(function (pos) {
    outerScopeVar = pos;
});
console.log(outerScopeVar);

¿Por qué aparece undefineden todos estos ejemplos? No quiero soluciones alternativas, quiero saber por qué sucede esto.

Nota: Esta es una pregunta canónica sobre la asincronicidad de JavaScript . No dude en mejorar esta pregunta y agregar ejemplos más simplificados con los que la comunidad pueda identificarse.

May 15 '14 06:05 Maaz Ahmed

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

Una analogía...

Ayer, el trabajo que estaba haciendo requería información de un colega. Lo llamé; así fue como fue la conversación:

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

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

Yo : Eso es genial Bob. ¡Llámame cuando tengas la información!

En ese momento colgué el teléfono. Como necesitaba información de Bob para completar mi informe, lo dejé y fui a tomar un café, luego me puse al día con 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í;

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

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

Yo : Eso es genial Bob. Esperaré.

Y me senté allí y esperé. Y esperó. Y esperó. Durante 40 minutos. Sin hacer 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 sincrónico.

Esto es exactamente lo que está sucediendo en todos los ejemplos de 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 seguirá 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 a JavaScript que se cargue lolcat.png, lo cual es una operación lenta . La función de devolución de llamada se ejecutará una vez que se complete esta lenta operación, pero mientras tanto, JavaScript seguirá procesando las siguientes líneas de código; es decir alert(outerScopeVar).

Es por eso que vemos que se muestra la alerta undefined; ya que alert()se procesa inmediatamente, 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 que la outerScopeVarvariable sea declarada como variable global.

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

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

img.src = 'lolcat.png';

Siempre verás que una devolución de llamada se especifica como una función, porque esa es la única* forma en JavaScript de definir algún código, pero no ejecutarlo hasta más tarde.

Por lo tanto, en todos nuestros ejemplos, 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í.

^{eval()* Técnicamente también puedes usarlo , pero eval()es malo para este propósito.}

¿Cómo hago esperar a la persona que me llama?

Es posible que actualmente tengas algún 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 esto 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).

May 29 '2014 09:05 Matt

Aquí hay una respuesta más concisa para las personas que buscan una referencia rápida, así como algunos ejemplos que utilizan promesas y async/await.

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 a la devolución de llamada y se actualice outerScopeVar.

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

Devoluciones de llamada

El cambio aquí es que getMessageacepta un callbackparámetro que se llamará para devolver 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 de forma natural para coordinar múltiples operaciones asíncronas. Una implementación estándar de Promises/A+ se proporciona de forma nativa en node.js (0.12+) y muchos navegadores actuales, pero 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 diferido

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/espera

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

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();

Jan 20 '2015 23:01 JohnnyHK

Para decir lo obvio, la copa representa outerScopeVar.

Las funciones asincrónicas serán como...

Dec 08 '2015 16:12 Johannes Fahrenkrug