Este problema ocurre porque la ejecución de Javascript y la representación de la página están ocurriendo en el mismo hilo de ejecución. Esto significa que mientras se ejecuta el código, el navegador no volverá a dibujar la página porque la ejecución de JavaScript bloquea la actualización del DOM como en su ejemplo.

Para resolver esto, puede usar setTimeout() que le permite especificar una función que se ejecutará una vez después de un número determinado de milisegundos. Ahora, habrá espacios entre la ejecución del código en los que el navegador tendrá la oportunidad de volver a dibujar la página. ahora, cuando en realidad pasas 0 como el argumento de retraso. programará la devolución de llamada para que se ejecute de forma asíncrona, después de la demora más breve posible, que estará disponible después de que el hilo de ejecución de JavaScript no esté ocupado (la función de devolución de llamada estará esperando en la cola de devolución de llamada para que el bucle de eventos la extraiga y se maneje después muy poco tiempo)

 function count() { var counter = 100; var max = 1000; function timeoutLoop() { document.getElementById('cc').innerHTML = counter; if (++counter < max){ setTimeout(timeoutLoop, 0); } } setTimeout(timeoutLoop, 0); } count();

 <div id="cc"> </div>

Más información sobre el event loop : https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop

Excelente artículo sobre la representación del navegador: https://developpaper.com/the-process-of-browser-rendering-web-pages/

Es porque estaba usando un ciclo while, en su lugar, use una declaración if para verificar si el contador ha llegado a 1000. Vea a continuación:

 var counter = 100; function countdown() { if(counter < 1000) { counter++; console.log(counter); document.getElementById('cc').innerHTML = counter; } } countdown(); setInterval(countdown, 1000);

 <div id="cc"></div>

No le estás dando tiempo al navegador para respirar

Además, ¿por qué tener un bucle cuando setInterval bucles?

Y quieres hacer la cuenta regresiva. supongo que no está activo. También queremos detener el conteo. Por último, podemos guardar un paréntesis.

 let counter = 10; // 10 to show it works let tId; const cc = document.getElementById('cc'); function countdown() { if (counter === 0) { cc.innerHTML = "DONE!"; clearInterval(tId); // stop return } // console.log(counter); cc.innerHTML = counter; counter--; } countdown(); tId = setInterval(countdown, 1000);

 <span id="cc"></span>