0

Estoy haciendo una consulta a mi base de datos de Firebase con un bucle for, pero este código de Firebase se ejecuta al terminar el for y no en el proceso de la secuencia y lo se porque lo pongo en la consola y lanza los datos leídos de Firebase al final y no entiendo porque y este es mi codigo:

var dias = 32
for (let index = 1; index < dias; index++) {
    var id = ('input'+index);
    var element = document.getElementById(id).checked;
    if (element == true) {
      var mes = document.getElementById('month').innerHTML;
      var año = document.getElementById('year').innerHTML;
      // concateno mi mes con un cero  y con el slice solo agarro los ultimos dos digitos
      var mescont = ('0'+mes).slice(-2);
      var fecha_completa = (index+'-'+mescont+'-'+año);
      console.log(fecha_completa);
      var userId = firebase.auth().currentUser;
      var database = firebase.database();
      console.log('Primer paso');
      database.ref('/fechas/' + userId.displayName+'/numero').once('value').then(function(snapshot) {
        var username = snapshot.val();
        console.log(username['numero']);
      });
   }

y al final en mi consola me sale los valores de de 'fecha_completa' y 'primer paso' y al final los valores de username['numero']

1 respuesta 1

1

Esto no es un error realmente. Lo que está sucediendo aquí no es más que el asincronismo de JavaScript. Lo que estás haciendo en las últimas 4 líneas de tu bucle for es un proceso que puede tardar tiempo, tiempo en establecer la conexión a la DB y encontar el dato que buscas. Javascript, para manejar mejor sus procesos, utiliza asincronismo. Lo que significa que ciertos procesos tardados delegaran el flujo de ejecución a la siguiente instrucción, mientras que el proceso tardado rsuelve. Cuando esté proceso tardado resuelve, pudieron haberse ejecutado más instrucciones debajo de esta. Cómo ejemplo claro está lo siguiente:

setTimeout( () => console.log("hola"), 3000)//tardará 3 segundos en ejecutarse.
console.log("mundo")//tardará menos de un segundo.
//Output: 
//mundo
//hola

En tu código estás manejando un proceso asíncrono al ejecutar está linea:

database.ref('/fechas/' + userId.displayName+'/numero').once('value').then(...

Es por esto que usas el método then al final, para manejar un proceso asíncrono. El único inconveniente con then es que cedes el flujo de ejecución a un callback, mientras que las instrucciones debajo de el siguen ejecutándose, por lo que el bucle for continua y continua.

Para abordar el control del asincronismo, javascript implementa varias soluciones, entre ellas estan los callbacks, las promesas y recientemente añadieron las keywords async/await.

Mi propuesta de solución es que modifiques tu bucle con tal de que quede así:

async function tuFuncion(){ // para usar async/await debes encapsular el proceso en una función asíncrona.
let dias = 32;
for (let index = 1; index < dias; index++) {
      //Tu código...
      let snapshot = await database.ref('/fechas/' + userId.displayName+'/numero').once('value');
      let username = snapshot.val();
      console.log(username['numero']);
}
}

De esta forma, el código se detendrá hasta que se obtenga el "snapshot" (lo que necesitas de firebase). Usando el ejemplo anterior, la implementación sería la siguiente:

async function decirHola() {
    await setTimeout( () => console.log("hola"), 3000)//tardará 3 segundos en ejecutarse.
    console.log("mundo")//tardará menos de un segundo, pero no será ejecutada hasta que termine la anterior.
}

decirHola();
//Output: 
//hola
//mundo

Cabe destacar que async/await, al ser una característica de javascript relativamente nueva, no es soportada por todos los navegadores. En el siguiente link caniuse podrás ver qué navegadores si soportan está característica para estar seguro de que quieres usarla 👍.

1
  • Gracias, en serio no sabia de async/await, mi antigua solucion era conectarme a la base de datos antes de ejecutar mi funcion, pero esta solucion es mas corta
    – Salaxer
    Commented el 15 ago. 2020 a las 3:12

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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