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
    Commented el 4 nov. 2022 a las 22:47
  • si, pero no lo renderiza en pantalla hasta que no sales del bucle
    – Javier
    Commented 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
    Commented 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
    Commented 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
    Commented 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.
    – DABL03
    Commented 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
    Commented 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
    Commented 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. Commented 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
    Commented el 5 nov. 2022 a las 11:03

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.