Home / Questions / 226575
Accepted
k1k4ss0
Asked: 2020-01-02 05:23:23 +0800 CST 2020-01-02 05:23:23 +0800 CST

how to control the execution of javascript

  • 772

I'm programming in javascript (I'm new) and I've noticed that sometimes it doesn't run sequentially, I've seen that it's because it runs asynchronously.

So far I've kind of gotten away with the setTimeout function, but I'd like to know if there are other ways to control the execution of javascript so it does exactly what I want.

In my particular case, I have this code where I access firebase to obtain the number of children of a node:

      firebase.initializeApp(config);

      var database = firebase.database();


             var numerojaja;
             //     TO-DO : obtener el numero de peliculas  
           firebase.database().ref('/peliculas/').once('value').then(function(snapshot) {  

               numerojaja=snapshot.numChildren();
               console.log(numerojaja);
           });

             console.log(numerojaja);

             //                 **********
             var numero_p=3;        // de momento 
             var nombre_p="hhola";
             var descripcion="esto es una descripcion";
             var reputacion="y esto una reputacion";
             var cartelera="esto es una direccion de una imagen";


             // for(etc.......){
             document.write('<tr>');
             document.write('<th scope="row">'+nombre_p+'</th>');
             document.write('<td>'+descripcion+' </td>');
             document.write('<td>'+reputacion+'</td>');
             document.write('<td><img src="'+direccion+'" class=".img-responsive" alt="Cinque Terre " style="max-width: 20%;"> </td>');
             document.write('</tr>');

             // end for.......

The problem is within the following section of code:

             var numerojaja;
             //     TO-DO : obtener el numero de peliculas  
           firebase.database().ref('/peliculas/').once('value').then(function(snapshot) {  

               numerojaja=snapshot.numChildren();
               console.log(numerojaja);
           });

Javascript first decides to skip execution inside the function and continues, and once it has finished executing the rest, it executes the function. Making that when I want to access that value I can't because it hasn't been executed yet.

Thank you very much.

javascript

1 Answers

  1. Best Answer

    Ok friend, the problem is that, why do you want to manipulate the data of your snapshot outside the event ? A de mas database has a method with a callback function ( then()) to execute your code immediately and consecutively after obtaining the data. JavaScript itself is an asynchronous language, so it's expected behavior, see this .

    Naturally if you want to do something in a function, you have to finish doing it inside the function, unless you make it return a specific value and call it at runtime.

    Look at the following examples:

    var str;

setTimeout(function(){
  str = "hola"
},2000);

console.log(str);

    JavaScript will never wait for two seconds to pass so that you can print the variable being outside the function, that's what the function itself is for to change the value, otherwise it would be impossible to load a web page... then Why is it necessary to print it outside if I can do it inside? is the correct question.

    Let's remember that a function is not the same as a conditional ... let's see the following code:

    var str;

if (str == undefined){
  str = "hola"
}

console.log(str);

    This works because the conditional sequentially evaluates the data being compared and changes or executes depending on it, so this time it won't be undefined.

    Now, if you have a function that you call when executing the code in real time, this time it will return the desired result:

    var str;

    function hola(str){
      str = "hola"
      return str
    }

    console.log(hola(str));

    So, the conclusion:

    If you need to execute code that has to do with the function inside the function itself, do it inside and the result will be synced.

    As it should be:

    var str;

    setTimeout(function(){
      str = "hola"
      console.log(str);
    },2000);

    As an additional value, I recommend that you read the documentation of the tools you use, for example:

    When you receive your snapshot in your code you put : "numerojaja=snapshot.numChildren();"

    This is going to be the same as undefinedbecause the snapshot is an object that you need to fetch its value val()from using the database method (or JQuery), the correct way would be:

    var data = snapshot.val();
var numerojaja = data.numChildren; //Sin () a de mas ya que no es una funcion, es un objeto.

    So the correct way would be, executing your code inside the event function or inside the function then():

    db.ref('/peliculas').once('value', function(snapshot) {  
   var data =snapshot.val();
   var numerojaja = data.numChildren;
   console.log(numerojaja);
 }).then(function(){
   console.log(numerojaja)           
 });

    Here I leave you Read and write data on the Web and Detect value events .

    I hope it helps you, greetings!

    • 2