Estoy interesado en generar 10 números impresos uno por uno usando JavaScript.
El código HTML que usé para generar 10 números usando JavaScript es:
let z = ""; for (y = 0; y < 11; y = y + 1){ x = y + 10; z = z + " Number " + x + " is printed. <br>"; } setInterval(function() { document.getElementById("demo").innerHTML = z }, 1000) <!DOCTYPE html> <html> <body> <h2>How to use For Loop in JavaScript</h2> <p>Output 10 numbers using for loop in Javascript.</p> <p id="demo"></p> </body> </html>El problema es que la salida se imprime de una vez después de un segundo en lugar de imprimir la salida una por una después de un segundo.
¿Cómo modificamos el código para que la salida individual se imprima después de un segundo?
¡Gracias!
Pon tu lógica real dentro del intervalo
let z = ""; let y = 0; const interval = setInterval(function() { if (y >= 11) return clearInterval(interval); y++; const x = y + 10; z = z + " Number " + x + " is printed. <br>"; document.getElementById("demo").innerHTML = z }, 1000) <!DOCTYPE html> <html> <body> <h2>How to use For Loop in JavaScript</h2> <p>Output 10 numbers using for loop in Javascript.</p> <p id="demo"></p> </body> </html>Use una función recursiva con setTimeout en lugar de setInterval.
function printDelay(max, iteration){ const newLine = `Number ${iteration + 10} is printed.<br>`; const demo = document.getElementById("demo"); demo.innerHTML = demo.innerHTML + newLine; if(iteration < max){ setTimeout(()=>printDelay(max, iteration + 1),1000); } } printDelay(10,1); <!DOCTYPE html> <html> <body> <h2>How to use For Loop in JavaScript</h2> <p>Output 10 numbers using for loop in Javascript.</p> <p id="demo"></p> </body> </html> // init value var i = 1; // func decleartion function PrintOneByOne() { // setTimeout // print for every 3 sec ~ 3000 ms // setTimeout(function() { z = " Number " + i + " is printed. <br>"; // append to element document.getElementById("demo").innerHTML += z i++; if (i <= 10) { PrintOneByOne(); } }, 3000) } // call func PrintOneByOne(); <!DOCTYPE html> <html> <body> <h2>How to use For Loop in JavaScript</h2> <p>Output 10 numbers using for loop in Javascript.</p> <p id="demo"></p> </body> </html>