Synchronous/Asynchronous mode

Hi guys.

I have not gotten the correct result to display data into page-content, maybe the problem it’s the Synchronous/Asynchronous concept, I’m confuse.

I have the “main” function(getJuegos) to show the records (WEB SQL local DB), for each record, I have to get some other data, call a second function (getMarcadores).

I wrote third console.log: console.log(“First result”), console.log(“Second result”) and console.log("Third result ") I hope to get it in the same order, but not, I get it…
First
First
Third
First
First
Third
Second (twice)

Why the console.log(“Second result” show it at the final?

  1. The page-init
    $$(document).on(‘page:init’, ‘.page[data-name=“cedula-seleccionar”]’, function (e){
    getJuegos();
    });

  2. getJuegos Function (main function)

function getJuegos(){

  //Borra contenido de lista-juegos

  $$('#lista-juegos').html("");

  db.transaction(function (tx){

    var select  = "SELECT encuentro.id_torneo,encuentro.id_equipo,equipo.equ_nombre,torneo.tor_nombre,encuentro.id_jornada,encuentro.enc_locvis,calendario.cal_fecha_hora,calendario.cal_estatus,calendario.id_juego ";

    var from    = 'FROM equipo, calendario, encuentro,torneo ';

    var where   = "WHERE encuentro.id_sucursal = calendario.id_sucursal and encuentro.id_cliente = calendario.id_cliente and encuentro.id_torneo = calendario.id_torneo and encuentro.id_jornada = calendario.id_jornada and encuentro.id_juego = calendario.id_juego and equipo.id_sucursal = encuentro.id_sucursal and equipo.id_cliente = encuentro.id_cliente and equipo.id_torneo = encuentro.id_torneo and equipo.id_equipo = encuentro.id_equipo and equipo.id_cliente = torneo.id_cliente and torneo.id_sucursal = equipo.id_sucursal and torneo.id_torneo = equipo.id_torneo and calendario.id_cliente = '"+String(gcliente)+"' AND calendario.id_sucursal = '"+String(gsucursal)+"' ";

    var order   = 'ORDER BY calendario.cal_fecha_hora ASC, encuentro.enc_locvis';   

    var sql     = select + from + where + order;

    var juego   = "";

    var estatus_juego = "";

    var marcador = 0;

    var marcador_string = "";

    tx.executeSql(sql,[],function callback(tx,results){

      var registros = results.rows.length, i;

      for(i=0; i<registros; i++){

        console.log("First result, Procesando Juego "+results.rows.item(i).tor_nombre+" "+results.rows.item(i).equ_nombre+" "+results.rows.item(i).enc_locvis+" valor de (i) "+String(i));

        if(i%2 != 0){

          //If the record number it's odd number

          getMarcadores(gcliente,gsucursal,results.rows.item(i).id_torneo,results.rows.item(i).id_jornada,results.rows.item(i).id_juego,results.rows.item(i).enc_locvis, function(marcador){

            if (marcador == 99){

              marcador_string += "- ?";

            }else{

              marcador_string +='- '+String(marcador);

            }

          });

          console.log("Third result "+marcador_string);

          juego = juego+'<div class="col row-marcadores" id="marcadores">'+marcador_string+'</div><div class="col" id="equipo-visita">'+results.rows.item(i).equ_nombre+'</div></div></div></div>';

          // Se agrega al componente LIST el juego en cuestión

          $$('#lista-juegos').append(juego);

        }else{

          //The record number it's even number

          switch(results.rows.item(i).cal_estatus){

            case '1':

              estatus_juego = 'Jugado';

              break;

            case '0':

              estatus_juego = 'Por Jugar';

              break;

          }

          getMarcadores(gcliente,gsucursal,results.rows.item(i).id_torneo,results.rows.item(i).id_jornada,results.rows.item(i).id_juego,results.rows.item(i).enc_locvis, function(marcador){

          console.log("Second result, este es el 1er. marcador "+String(marcador)+" "+String(i));

          if (marcador == 99){

            marcador_string = "¿ ";

          }else{

            marcador_string = String(marcador) + " ";

          }

          });

        }

        fecha_juego = new Date(results.rows.item(i).cal_fecha_hora);

        formatted_date = fecha_juego.getDate() + "-" + (fecha_juego.getMonth() + 1) + "-" + fecha_juego.getFullYear() + " " + fecha_juego.getHours() + ":" + fecha_juego.getMinutes();

        juego = '<div class="block block-cedula-sel0" onclick = "getDatosJuego()"><div class="block block-cedula-sel1"><div class="row row-cedula-sel-text1"><div class="col" id="fecha-hora-juego">'+formatted_date+'</div><div class="col" id="nombre-torneo">'+results.rows.item(i).tor_nombre+'</div><div class="col" id="id_jornada">J-'+results.rows.item(i).id_jornada+'</div></div><div class="row row-cedula-sel-text2"><div class="col" id="estatus-juego">'+estatus_juego+'</div></div></div><div class="block block-cedula-sel2"><div class="row row-cedula-sel-text3"><div class="col" id="equipo-local">'+results.rows.item(i).equ_nombre+'</div>';  

      }

    });

  });

}