1

En los siguientes ejemplos, se muestras operaciones asíncronas, dentro de bucles.

El primer ejemplo no funciona y es un resultado esperado ya que el bucle termina la ejecución y los callbacks muestran el último valor de la variable recorrida en el bucle.

El segundo ejemplo soluciona el anterior con el uso de bind.

El tercer ejemplo crea una función anónima que se autoejecuta y se le pasa el valor correcto. Esta nueva función crea un nuevo scope y la función que se llama dentro de esta contiene el valor correcto para cada iteración.

El último ejemplo usa un bucle forEach, el cual produce un correcto resultado ya que el valor de cada iteración viene encapsulado en una función, creando um nuevo scope...

var obj = {
  key : 'val',
  key2 : 'val'
};

function funcionAsync(cb){
  setTimeout(cb, 1000);
}

// Quiero evitar hacer esto, es decir, ir pasando el parámetro entre funciones
function funcionAsyncConParam(param, cb){
  setTimeout(()=>cb(param), 1000);
}

var keys = Object.keys(obj);

//NO funciona, imprime key2 key2
for(k of keys){
  funcionAsync(function(){
    console.log(k, 'Función 1');
  });
}

//Funciona, imprime key key2 (Pero se quiere evitar)
for(k of keys){
  funcionAsyncConParam(k, function(k){
    console.log(k, 'Función EVITAR');
  });
}

//Funciona, imprime key key2
for(k of keys){
  funcionAsync(function(k){
    console.log(k, 'Función 2');
  }.bind(null, k));
}

//Funciona, imprime key key2
for(k of keys){
  (function(k){
    funcionAsync(function(){
      console.log(k, 'Función 3');
    });
  })(k);
}

// Funciona, imprime key key2
keys.forEach(function(k){
  funcionAsync(function(){
    console.log(k, 'Función 4');
  });
});

Creo entender el porqué del funcionamiento de las diversas soluciones, mi pregunta es: ¿Existe alguna otra forma de pasar como referencia el valor actual del bucle a una función asíncrona o manejador de eventos?

5
  • @devconcept En absoluto. Yo no estoy preguntando por un problema en concreto, sino por soluciones alternativas a las que planteo. Commented el 29 jun. 2016 a las 16:48
  • Las soluciones estan ya explicadas en esa pregunta al igual que la causa del problema. Si no entiendes cual es no vas a entender como solucionarlo. El hecho que uses setTimeout no hace que la asincronía sea la causa del problema, el mal uso de closures es lo que lo provoca.
    – devconcept
    Commented el 29 jun. 2016 a las 16:56
  • Entiendo el problema, si no no habría elaborado las soluciones. Además esa pregunta solo comenta una solución, yo estoy ofreciendo varias formas. Y parece ser que según la respuesta a esta pregunta, el uso de la palabra reservada "let" es otra solución. Commented el 29 jun. 2016 a las 17:00
  • Esto es un problema muy antiguo y las soluciones siempre son las mismas. Las puedes encontrar en es.stackoverflow.com/a/5870/2224 y stackoverflow.com/questions/750486/…. Tu estas replanteandolo de varias formas diferentes pero sigue siendo el mismo problema. Como dices usar let es una solución por lo que estas usando una de las soluciones en la pregunta referida.
    – devconcept
    Commented el 29 jun. 2016 a las 17:09
  • @devconcept La verdad que tienes razón en que la respuesta de la pregunta de SO en Español tiene casi todas las opciones (no la había leído entera), falta el uso de bind, pero es bastante completa. Quizá lo único adicional que puede aportar este post es que el título y el planteamiento es más directo y conciso y las discusiones en los comentarios de las respuestas, ayudan a saber que el uso de algunos de los elementos de las nuevas especificaciones hay que usarlos con cautela para prevenir comportamientos no esperados en distintos navegadores. Commented el 29 jun. 2016 a las 17:17

1 respuesta 1

1

Yo creo que no estas iterando correctamente tu objeto, aquí voy a dejarte como itero los object, espero te funcione para lo que buscas.

var obj = {key : 'val',key2 : 'val'}; // Tu Object

for(let a in obj){ // Hacemos uso del for in, con la variable a obtenemos el indice
  x(function (){console.log(a,obj[a])}); // ejecutacion la funcion x, pasandole como parametros el indice y el valor del object en la posición del indice
}

function x(b){
  setTimeout(b, 3000);
}


Edición por continuación

Haber en este código le paso una función anónima y se ejecuta a los 3 segundos.

var obj = {key : 'val',key2 : 'val'}; // Tu Object

for(let a in obj){ // Hacemos uso del for in, con la variable a obtenemos el indice
  x(function (){console.log(a,obj[a])}); // ejecutacion la funcion x, pasandole como parametros el indice y el valor del object en la posición del indice
}

function x(b){
  setTimeout(b, 3000);
}


edición por comentario Hice una impresión de pantalla sobre el resultado que me muestra la consola introducir la descripción de la imagen aquí

10
  • Gracias por tus respuesta! Pero desafortunadamente no es lo que se explica en la pregunta. En mi caso quiero obtener el valor de a no dentro de la función x sino dentro de la función b que se ejecuta tras el Timeout de un segundo. Si no fuera el caso simplemente podría escribirse: for(let a in obj){console.log(a)}. De hecho en tu ejemplo se imprime los resultados antes de que se produzca el Timeout. También he utilizado nombres bastante ambiguos y puede confundir, ahora mismo cambio los nombres, para que sea más visual. Commented el 29 jun. 2016 a las 16:03
  • @JoseHermosillaRodrigo ya edite la respuesta, es lo que buscas? Commented el 29 jun. 2016 a las 16:14
  • Lo siento, pero si te fijas ahora tienes el problema de que la variable a en el bucle queda referenciadas al scope global con el valor del último elemento del bucle y cuando los callbacks son llamados imprime key2 key2, lo cual no es lo que se busca. De todas formas aprecio tu esfuerzo! =) Commented el 29 jun. 2016 a las 16:18
  • Seguro @JoseHermosillaRodrigo he revisado el log de la consola y no me arroja lo que comantas, me muestra lo siguiente: key val 11:21:41.686 key2 val 11:21:41.688. Mira voy a editar la respuesta, agregando la imagen Commented el 29 jun. 2016 a las 16:23
  • 1
    En efeto en Chrome funciona! Commented el 29 jun. 2016 a las 16:31

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.