2

Quiero que mi <script> no se se siga ejecutando hasta tener la respuesta del servidor y hacer lo que tiene que hacer, estoy usando Javascript nativo del navegador, es decir, sin frameworks ni librerías ni nada.

<script>
        function run(){
             cargar() 
             sppWizard.init(optionsAssistant);
        } 
        </script>
    </head>
     <body class="spp-loading" onload="run()">

Aquí en el Head, creo la función cargar(); CUANDO haya terminado esa función quiero que se ejecute la siguiente línea.

function cargar() {

// realizamos proceso de validacion del JSON
var request = new XMLHttpRequest();
request.open("GET", "./entrada", true);
request.send(null);
request.onreadystatechange = function() {
    if (request.readyState === 4 && request.status === 200) {
        var MyJSON = JSON.parse(request.responseText);
        procesar(MyJSON);
    }
  }
}

A su vez esta función llamará a otras y así, pero cuando termine el Cargar(); es cuando el código javascript debe seguir, ¿ cómo hago esto ?

De momento el JSON del servidor, lo cojo del local, en un futuro, se llamará a un servidor...

Gracias.

2 respuestas 2

3

Lo que quieres hacer lo puedes hacer con un callback, un callback garantiza que cierto código no se ejecute hasta que otro fragmento haya terminado su ejecución. La implementación es algo así:

function primera(callback) {
  // Simular un retraso en el código
  setTimeout(function () {
    console.log(1);
    callback();
  }, 500);
}
function segunda() {
  console.log(2);
}

primera(segunda);

Para tu ejemplo se podría realizar así. La función cargar() quedaría:

function cargar(callback) {

  // realizamos proceso de validacion del JSON
  var request = new XMLHttpRequest();
  request.open("GET", "./entrada", true);
  request.send(null);
  request.onreadystatechange = function () {
    if (request.readyState === 4 && request.status === 200) {
      var MyJSON = JSON.parse(request.responseText);
      procesar(MyJSON);
      callback();
    }
  }
}

Y para llamarla sería algo así:

function run() {
  cargar(function () { 
    // Aqui va el código que quieres ejecutar cuando termine la función cargar()
    sppWizard.init(optionsAssistant);
  })

} 
1

Recuerda que AJAX su funcionalidad es asíncrona, es decir, el script de JS seguirá corriendo sin importar si ya te respondió o no. Aquí podemos hacer dos cosas en tu función cargar

if (request.readyState === 4 && request.status === 200) {
    var MyJSON = JSON.parse(request.responseText);
    sppWizard.init(optionsAssistant);
    procesar(MyJSON);
}

Lanzar tu función sppWizard.init(optionsAssistant); Cuando el servidor responda, o

request.open("GET", "./entrada", false);

Cambiar la petición a síncrona, es decir, no continuar con el script hasta que el servidor responda.

Para lo que requieres, te serviría mejor poner síncrona la petición ya que si tienes más código en tu JS lo tendrás que meter al if del success del AJAX

10
  • El problema es que sppWizard.init(optionsAssistant); debe ir cuando termine el procesar.
    – EduBw
    Commented el 5 nov. 2018 a las 16:40
  • Por eso, las dos opciones te sirven. Commented el 5 nov. 2018 a las 16:41
  • Perdona mi desconocimiento, pero no entiendo como me puede ayudar eso, si estás diciendo que sppWizard.init(optionsAssistant); se ejecute antes de procesar(MyJson);
    – EduBw
    Commented el 5 nov. 2018 a las 16:42
  • procesar(MyJSON); creará los elementos que .init(optionsAssistant); utilizará después, pero lo estás poniendo una línea antes.
    – EduBw
    Commented el 5 nov. 2018 a las 16:42
  • Uncaught ReferenceError: optionsAssistant is not defined at XMLHttpRequest.request.onreadystatechange
    – EduBw
    Commented el 5 nov. 2018 a las 16:44

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.