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?