0

Quiero que se vaya mostrando en un div un texto recibido de una llamada AJAX a un ".json". He creado un botón que se encarga de realizar la llamada. Dentro de la llamada voy haciendo una serie de bucles forEach() en las propiedades del JSON e insertándolas por medio del método append() de JQUERY.

Si "debugueo" en consola por medio de console.log() con esos mismos parámetros que intento pintar, se me muestran todo con el retraso correcto. Sin embargo, en el .jsp se me pinta todo al mismo tiempo (justo al final de la llamada).

El retardo lo he creado por medio de una función "sleep()".

Aquí muestro el código JavaScript:

<script>
        $(document).ready(function(){
            var btn = document.getElementById("btn_empezar");
            btn.addEventListener("click", llamada, false);
        });

        function llamada(){
            $.ajax({
             url: "json/Dialogos.json",
             type: "GET",
             success: function(data) {
                data.forEach(function(conversacion, index) {

                    $("#texto").append("<h3> " + conversacion.titulo + "</h3>")

                    conversacion.mensajes.forEach(function(mensaje, index) {

                        /*  ******  DEBUGEO EN CONSOLA  ******* */
                            console.log("Tipo: " + mensaje.tipo);
                            console.log("Emisor: " + mensaje.emisor);
                            console.log("Contenido: " + mensaje.contenido);
                        /*  ****************************************** */


                            $("#texto").append("<p> " + mensaje.contenido + "</p>");

                            sleep(2000);


                            if (typeof mensaje.opciones != "undefined") {

                                mensaje.opciones.forEach(function(opcion, index) {

                            /*  ******  DEBUGEO EN CONSOLA  ******* */
                                    console.log("Id: " + opcion.id);
                                    console.log("Id: " + opcion.pregunta);
                                    console.log("Id: " + opcion.respuesta);
                            /*  ****************************************** */

                                    $("#texto").append("<p> " + opcion.pregunta + "</p>")
                                    sleep(1000);
                                });
                            }

                            console.log("------------------------------------");
                        });
                    });
                }
             });
        }

        function sleep(milliseconds) {
          const date = Date.now();
          let currentDate = null;
          do {
            currentDate = Date.now();
          } while (currentDate - date < milliseconds);
        }

    </script>

Aquí muestro el JSON:

[
  {
    "titulo": "Contenido Bla-Bla-Bla",
    "mensajes": [
      {
        "tipo": "TEXTO",
        "contenido": "Contenido Bla-Bla-Bla "
      },
      {
        "tipo": "DIALOGO",
        "emisor": "anciano1",
        "contenido": "Contenido Bla-Bla-Bla ",
        "opciones": [
          {
            "id": "0",
            "pregunta": "-¿Contenido Bla-Bla-Bla?",
            "respuesta": "Contenido Bla-Bla-Bla"
          },
          {
            "id": "1",
            "pregunta": "-¿Contenido Bla-Bla-Bla?",
            "respuesta": "Contenido Bla-Bla-Bla"
          }
        ]
      }
    ]
  }
]

El Body del JSP:

<body>
    <div id="padre">
        <div id="texto"></div>
        <div id="siguiente">
            <button id="btn_empezar">Empezar</button>
        </div>
    </div>
</body>
3
  • 1
    te recomiedo pintar todo al tiempo, pero en el append de la respuesta ponles una clase , y esa clase le asignas una animacion en css que vaya de oculto a visible en el tiempo que digas Commented el 16 feb. 2022 a las 20:54
  • 1
    No se me había ocurrido hacerlo de esa manera. ¡Gracias Cristian Camilo! Commented el 16 feb. 2022 a las 20:57
  • Lamento no resolver tu pregunta, pero espero te sirva esa opción Commented el 16 feb. 2022 a las 20:58

2 respuestas 2

1

Tu función sleep es una muy mala idea. El browser tiene un solo hilo de procesamiento y lo estás saturando para retrasar un evento. Eso es como fundir el motor de tu auto para que no acelere tanto.

La respuesta de masterguru va en la dirección correcta, pero el uso de setTimeout es un poco frágil. Usas un bucle para calcular un retraso que se va incrementando, pero cuánto retraso es el correcto? 2000ms puede ser mucho, 500ms puede ser muy poco y se empezarán a superponer. En este caso tienes el arreglo completo en una variable, pero otras veces necesitarás hacer varias peticiones cuya respuesta recibirás en un tiempo no determinístico. También puede suceder que teniendo todo calibrado como reloj, alguien salga con la noticia que hay que añadir otro nivel de array anidados, y tendrás que mover todo y calibrarlo...

Segunda opción, entonces: el setTimeout del elemento n+1 se llama desde el callback del elemento n. Para funciones declaradas dentro de un bucle esto puede volverse muy confuso y llegar a un nivel de recursión que llene el stack.

Mi sugerencia es usar promesas y poner la espera dentro de un bucle for..of, que sí respeta el uso de async..await a diferencia del forEach.

Qué promesa vamos a esperar? Yo uso un helper inspirado en Promise.delay de bluebird:

    async function waitFor(delay) {
         return new Promise(resolve => {
            setTimeout(resolve,delay)
         })
    }

Como la operación que quieres hacer implica modificar el DOM, es sano hacerlo cuando el main loop tiene espacio para encolarlo, usando requestAnimationFrame. Esta función también se puede convertir en promesa:

 async function requestAnimationPromise() {
    return new Promise(resolve => {
      requestAnimationFrame(resolve)
    })
  }

Con esos dos helpers ahora iteramos:

async function waitFor(delay) {
  return new Promise(resolve => {
    setTimeout(resolve, delay)
  })
}
async function requestAnimationPromise() {
  return new Promise(resolve => {
    requestAnimationFrame(resolve)
  })
}
const json = [{
  "titulo": "Titulo Contenido Bla-Bla-Bla",
  "mensajes": [{
      "tipo": "TEXTO",
      "contenido": "TEXTO Contenido Bla-Bla-Bla "
    },
    {
      "tipo": "DIALOGO",
      "emisor": "anciano1",
      "contenido": "Contenido: Contenido Bla-Bla-Bla ",
      "opciones": [{
          "id": "0",
          "pregunta": "-¿Hola Don Pepito?",
          "respuesta": "Hola Don José"
        },
        {
          "id": "1",
          "pregunta": "-¿Pasó Ud. por mi casa?",
          "respuesta": "Por su casa yo pasé"
        }
      ]
    }
  ]
}]

async function llamada(items) {
  const texto = $("#texto");
  for (let conversacion of items) {

    await requestAnimationPromise()
    texto.append("<h3> " + conversacion.titulo + "</h3>")

    for (let mensaje of conversacion.mensajes) {
      await waitFor(1000).then(requestAnimationPromise)

      texto.append("<p> " + mensaje.contenido + "</p>")


      for (let opcion of mensaje.opciones || []) {
        await waitFor(1000).then(requestAnimationPromise)
        texto.append("<li> " + opcion.pregunta + "</li>")
      }
    }
    await waitFor(1000)
  }
}
$(document).ready(function() {
  var btn = document.getElementById("btn_empezar");
  btn.addEventListener("click", () => llamada(json), false);
});
#texto {
  font-size: 0.9em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <div id="padre">
    <div id="texto"></div>
    <div id="siguiente">
      <button id="btn_empezar">Empezar</button>
    </div>
  </div>
</body>

0

Segun parece, y dicen en esta respuesta del SO en inglés, la única forma de retrasar algo en javascript de forma síncrona y sin bloqueos es mediante setTimeout() o sus derivados.

Aquí dejo una muestra basándome en tu pregunta:

$(document).ready(function() {
  var btn = document.getElementById("btn_empezar");
  btn.addEventListener("click", llamada, false);
});

var json = [{
  "titulo": "Titulo Contenido Bla-Bla-Bla",
  "mensajes": [{
      "tipo": "TEXTO",
      "contenido": "TEXTO Contenido Bla-Bla-Bla "
    },
    {
      "tipo": "DIALOGO",
      "emisor": "anciano1",
      "contenido": "Contenido: Contenido Bla-Bla-Bla ",
      "opciones": [{
          "id": "0",
          "pregunta": "-¿Hola Don Pepito?",
          "respuesta": "Hola Don José"
        },
        {
          "id": "1",
          "pregunta": "-¿Pasó Ud. por mi casa?",
          "respuesta": "Por su casa yo pasé"
        }
      ]
    }
  ]
}]

function llamada() {
  json.forEach(function(conversacion, index) {

    $("#texto").append("<h3> " + conversacion.titulo + "</h3>")

    conversacion.mensajes.forEach(function(mensaje, index2) {

      setTimeout(function() {

        /*  ******  DEBUGEO EN CONSOLA  ******* */
        console.log("Tipo: " + mensaje.tipo);
        console.log("Emisor: " + mensaje.emisor);
        console.log("Contenido: " + mensaje.contenido);
        /*  ****************************************** */

        $("#texto").append("<p> " + mensaje.contenido + "</p>");

        if (typeof mensaje.opciones != "undefined") {

          mensaje.opciones.forEach(function(opcion, index3) {
            setTimeout(function() {

              console.log("Id: " + opcion.id);
              console.log("Id: " + opcion.pregunta);

              $("#texto").append("<p> " + opcion.pregunta + "</p>")
            }, (index3+1) * 3000);
          });

          mensaje.opciones.forEach(function(opcion, index4) {
            setTimeout(function() {

              console.log("Id: " + opcion.id);
              console.log("Id: " + opcion.respuesta);

              $("#texto").append("<p> " + opcion.respuesta + "</p>")
            }, (index4+1) * 5000);
          });

        }

        console.log("------------------------------------");
      }, (index2+1) * 2000);

    });
  });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
    <div id="padre">
        <div id="texto"></div>
        <div id="siguiente">
            <button id="btn_empezar">Empezar</button>
        </div>
    </div>
</body>

3
  • Intenté hacerlo por medio de setTimeout() pero no conseguía alterar el resultado. En consola sucedía correctamente pero en el jsp no. Se mostraba todo al final de la llamada. Commented el 17 feb. 2022 a las 9:59
  • Bueno, no esperaba tampoco que mi respuesta fuera perfecta, tan solo indicarte porque tu función sleep no funcionaba y un ejemplo básico de como podrias solucionarlo, pero la implementación final corria de tu cuenta. Tal como dices, no parece funcionar en tu jsp, y la verdad, la respuesta de @ffflabs parece mucho mejor y más moderna (yo aun ni se lo que es una promesa, he empezado hace poco con javascript)
    – masterguru
    Commented el 17 feb. 2022 a las 10:14
  • Jajaja ese es el problema que yo tampoco controlo tanto. Intenté realizar de primeras el proyecto usando fetch() pero me encontré con demasiados obstáculos y al final desistí. Pero si, creo que es algo que debo empezar a dominar más... Commented el 17 feb. 2022 a las 15:43

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.