1

Lo primero disculpas porque soy totalmente novato en javascript.

Quiero hacer un loop infinito, en el cual, mediante un prompt, le pida al usuario un dato y lo ponga en pantalla. El problema lo tengo en que, mientras se está ejecutando el loop con el prompt, la pantalla no se refresca.

<!DOCTYPE html>
<html>
<body>
<h2>Bucle infinito compra papeleria</h2>
<h3>Stock</h3>
<p id="tablePrint"></p>
<script>
let compraManolo;

do {  
document.getElementById('tablePrint').innerHTML = compraManolo;
compraManolo = prompt("Lápices?");
}
while (compraManolo < 10);

</script>
</body>
</html>

18
  • ¿que quieres decir con que no se refresca? en tu snippet yo veo que si aparece el valor puesto cada vez que lo ejecutas y te pide otro
    – masterguru
    el 4 nov. 2022 a las 22:47
  • si, pero no lo renderiza en pantalla hasta que no sales del bucle
    – Javier
    el 4 nov. 2022 a las 22:52
  • ¿has ejecutado el snippet que has puesto? Yo veo que si se renderiza en pantalla (si entendemos renderizar por mostrar el resultado del innerHTML en cada ciclo... si te refieres a otra cosa explícate mejor pues no lo entiendo, lo siento)
    – masterguru
    el 4 nov. 2022 a las 23:02
  • no no, me refiero precisamente a eso. Al menos en mi ordenador (he probado firefox,chrome y brave) ejecuto el snippet y no aparece nada (cuadrado en blanco) hasta que pongo un número mayor a 10, que entonces, en la pantalla aparece: Bucle infinito compra papeleria Stock y el número de la variable. Pero si pongo un número distinto a 10, la pantalla continúa en blanco.
    – Javier
    el 4 nov. 2022 a las 23:08
  • Mira, esto es lo que ocurre cuando lo hago yo: anonfiles.com/F9A2U4F4y2/yosiloveo_mp4 (es un mp4)... ¿a ti no te sucede lo mismo?
    – masterguru
    el 4 nov. 2022 a las 23:13

2 respuestas 2

1

Puedes ocupar setTimeout y quitar el while, reemplázalo por un función recursiva, la cual llamaremos nuevamente si la condición (compraManolo < 10) se cumple

De esta manera:

let compraManolo=0;

function launchprompt(){
  setTimeout(function() {
     compraManolo = prompt("Lápices?");
     if(compraManolo!=undefined){
          document.getElementById('tablePrint').innerHTML += compraManolo +"<br />"; //agrega el número más abajo
          //document.getElementById('tablePrint').innerHTML = compraManolo; //reemplaza todo el contenido

        if (compraManolo < 10){
           launchprompt();
        }
     }

  },10);

}

launchprompt();
<h2>Bucle infinito compra papeleria</h2>
<h3>Stock</h3>
<p id="tablePrint"></p>

3
  • Tampoco me fijé en que se sobre escribe la tabla por cada llamada a función. el 5 nov. 2022 a las 5:47
  • Por fin! me funciona perfectamente y es una solución sencilla que puedo implementar sin cambiar casi el código. MUCHAS GRACIAS!!
    – Javier
    el 5 nov. 2022 a las 11:03
  • @Javier Que bueno te haya servidor, recuerda marcar la respuesta como aceptada si así lo consideras.
    – Yussef
    el 5 nov. 2022 a las 17:24
1

De seguro intentas hacer un bucle infinito como normalmente se haría:

while (true){...}

El problema que el navegador se queda ejecutando ese bucle y no redibuja la pagina. En javascript para hacer un bucle infinito y permitir que se cargue la pagina se usa la funcion setInterval(callback, time); que como parametro te pide una función y el tiempo de retraso por cada llamada.

<!DOCTYPE html>
<html>
    <body>
        <h2>Bucle infinito compra papelería</h2>
        <i><b>Nota:</b> Use clear para limpiar pantalla</i>
        <h3>Stock</h3>
        <p id="tablePrint"></p>
        <script>
            let compraManolo="";//lo iniciamos con una cadena vacía para que no nos salga undefined
            var idMainLoop=0;
            function mainLoop(){
            let output=document.getElementById("tablePrint");
                output.innerHTML += compraManolo+"<BR/>";
                compraManolo = prompt("Lápices?");

                if (compraManolo!="" && parseInt(compraManolo) > 10)//!="" Para evitar errores.
                   clearInterval(idMainLoop);//Termina nuestro bucle
                else if(compraManolo=="clear")
                   output.innerHTML=compraManolo="";//Nuevo comando que agregué, es para limpiar la tabla:)
            }
            idMainLoop=setInterval(mainLoop,1000);//1000 para que se ejecute por cada 1s
        </script>
    </body>
</html>

La función setInterval solo agrega una llamada a la cola de todo lo que se debe ejecutar en el navegador, permitiendo que se redibuje, etc... .
Si quieres detener el bucle puedes cambiar la última línea para almacenar el id de la iteración que estas usando:

var idMainLoop=setInterval(mainLoop,1000);//1000 == 1s
//Y detenemos usando clearInterval(idMainLoop);

Enlaces externos:

2
  • 1
    Retorna undefined, tendrías que validar que esto no suceda y el loop continúe. el 5 nov. 2022 a las 1:45
  • Muchas gracias!! he probado la anterior y me funciona perfectamente. Supongo que así también lo haría. MUCHAS GRACIAS!
    – Javier
    el 5 nov. 2022 a las 11:03

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.