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>