Tienes varios problemas con tu función, pero el principal es que no estás tomando en cuenta que entre que se actualiza la vista en pantalla y se ejecuta tu código, al navegador no le da tiempo de hacer el refresco necesario para mostrar correctamente el progreso, ya que todo ocurre demasiado rápido.
En primer lugar, la implementación actual que tienes no realiza correctamente el cálculo del porcentaje que deseas mostrar de tu barra de progreso.
Asumiendo que el cometido final es calcular la suma de todos los números entre 1 y n
, siendo n
el valor introducido en el input
, el cálculo del porcentaje debes realizarlo de la siguiente forma:
const porcentaje = 100 - parseInt((actual * 100) / inicial);
¿Y porqué restamos de 100 el valor calculado?
Pues es muy sencillo, supongamos que el valor introducido es 3, por lo tanto, el valor de actual
e inicial en la primera iteración sería el mismo dando como resultado que la barra tenga un 100% de anchura. En la siguiente iteración, el cálculo del porcentaje daría 66% y a la siguiente 33% llegando a 0% al finalizar el ciclo. Esto nos daría un porcentaje decreciente, es por ello que para convertirlo en un porcentaje creciente, vamos restando de 100 en cada iteración el porcentaje calculado. Pero la razón real de esto es que estás empezando desde n
hasta 0. Es decir, vas de forma decreciente. Si lo hicieras de forma creciente, entonces no habría necesidad de restar de 100 el porcentaje.
En segundo lugar, debes introducir una pausa entre cada iteración para lograr el efecto de ver el progreso real de tu proceso. En Javascript no existe una función directa que nos permita hacer una pausa de cierta cantidad de tiempo especificado, pero podemos escribir una. Para ello me apoyaré en el uso de Promesas y el método setTimeout
de la API Window Worker presente en todos los navegadores.
La idea es escribir una función que realice la pausa necesaria para que el navegador tenga tiempo de mostrar la vista actualizada de la barra de progreso. Esta función se puede ver así:
const sleep = ms => {
return new Promise(resolve => setTimeout(resolve, ms));
}
Donde se observa que la función recibe un parámetro que representa la cantidad de milisegundos que tardará la Promesa en ser resuelta.
Por último, y sin ver el código html
de tu aplicación, podemos escribir una función asíncrona (async
), para poder usar await
y esperar por la resolución de la Promesa.
El código completo podría verse de la siguiente forma:
const sleep = ms => {
return new Promise(resolve => setTimeout(resolve, ms));
}
const barra = document.getElementById("barra");
const resultado = document.getElementById("resultado");
const button = document.getElementById('calcular');
async function calcular(e){
button.setAttribute('disabled', '');
resultado.innerHTML = '';
barra.style.width = '0%';
let acum = 0;
let numero = parseInt(document.getElementById('numero').value);
if(isNaN(numero) || numero < 1) {
resultado.innerHTML = 'Número debe ser positivo';
button.removeAttribute('disabled');
return;
}
const total = numero;
while(numero > 0) {
acum += numero;
numero--;
const porcentaje = 100 - parseInt((numero * 100)/total);
await sleep(100);
barra.style.width = `${porcentaje}%`;
}
resultado.innerHTML = acum;
button.removeAttribute('disabled');
}
button.addEventListener('click', calcular);
.progress-container {
height: .7rem;
width: 200px;
border: black solid 1px;
margin: .4rem 0;
}
#barra {
position: relative;
width: 0;
height: .7rem;
background-color: blue;
}
<input id="numero" placeholder="Escriba un número">
<br>
<div class="progress-container">
<div id="barra"></div>
<div>
<br>
<div id="resultado"></div>
<br>
<br>
<button id="calcular">Calcular</button>
Nota que he establecido un valor de ms
en 100, lo cual significa que en cada iteración se esperará 0.1 segundos antes de ejecutar la siguiente, podrías usar un valor inferior, pero algún punto no habrá diferencia en la salida, por más cercano a cero que quieras poner el valor. También he usado un bucle while
para mostrarte que da igual si usas un bucle for
o un bucle while
, siempre que la lógica sea correcta.
Espero que esto te ayude a resolver el problema.
EDICIÓN
El bucle for
es efectivamente bloqueante, tal como lo es cualquier bucle iterativo, pero usado tal como te lo he propuesto se puede igualmente esperar a que una iteración finalice y se ejecute la siguiente, siendo totalmente válido. Por ejemplo, en el siguiente código he cambiado el bucle while
por un bucle for
y he establecido el valor de ms
a cero, para no añadir un tiempo adicional1 a tu proceso real:
const sleep = ms => {
return new Promise(resolve => setTimeout(resolve, ms));
}
const barra = document.getElementById("barra");
const resultado = document.getElementById("resultado");
const button = document.getElementById('calcular');
async function calcular(e){
button.setAttribute('disabled', '');
resultado.innerHTML = '';
barra.style.width = '0%';
let acum = 0;
let numero = parseInt(document.getElementById('numero').value);
if(isNaN(numero) || numero < 1) {
resultado.innerHTML = 'Número debe ser positivo';
button.removeAttribute('disabled');
return;
}
const total = numero;
for(i = total; i >= 0; --i) {
const porcentaje = 100 - parseInt((i * 100)/ total);
acum += i;
await sleep(0);
barra.style.width = `${porcentaje}%`;
}
resultado.innerHTML = acum;
button.removeAttribute('disabled');
}
button.addEventListener('click', calcular);
.progress-container {
height: .7rem;
width: 200px;
border: black solid 1px;
margin: .4rem 0;
}
#barra {
position: relative;
width: 0;
height: .7rem;
background-color: blue;
}
<input id="numero" placeholder="Escriba un número">
<br>
<div class="progress-container">
<div id="barra"></div>
<div>
<br>
<div id="resultado"></div>
<br>
<br>
<button id="calcular">Calcular</button>
Notas
1 Realmente si que se añade un tiempo adicional a tu proceso, ya que setTimeout
, aunque configures ms
a cero, hará que se ejecute la función en el próximo ciclo de eventos. Si en este tiempo existen procesos previos en el ciclo de eventos, la ejecución del callback
pasado a setTimeout
será procesada en el orden que le corresponda en la cola de eventos.
numerador
antes de ejecutar tu función? No se ve por ningún lado la asignación del mismo. Por otro lado, ¿cuál es la operación inventada que tarda mucho? No se aprecia claramente lo que intentas hacer. Te invito a leer Cómo preguntar y ejemplo mínimo verificable. Saludosfor loop
y no una implementación de algo que necesitas, porque sumar n números uno a uno es lo más ineficiente que hay. Para ello existe una fórmulaSuma = n * (n + 1) / 2
que te da la suma de los números desde el 1 a n con una complejidad computacional deO(1)
.