2

Hola llevo poco tiempo programando en JavaScript. Estaba haciendo un programa que calcula una operación inventada y como con números grandes tarda bastante quería hacer una barra de progreso. El problema está en que la barra de progreso solo se actualiza cuando sale del bucle for y en ese momento ya está completa.

No sé como puedo hacer que la barra se actualice aunque siga en el bucle for.

    var numero;
    var resultado;
    var porcentaje;
    var numerador = 0;

    function calcular(){
      const numeroi = parseInt(document.getElementById("numero").value);
      numero = parseInt(document.getElementById("numero").value) - 1;
      document.getElementById("resultado").innerHTML = "";
      resultado = numeroi;
      for (numero; numero > 0; numero--){
        resultado += numero;
        numerador++;
        porcentaje = numerador  / numeroi * 100;
        document.getElementById("barra").style.width = `${porcentaje}%`;
        }
      numerador++;
      porcentaje = numerador  / numeroi * 100;
      document.getElementById("barra").style.width = `${porcentaje}%`;
      document.getElementById("resultado").innerHTML = resultado;
    }
#contenedor-barra{
  background-color: #dedede;
  width: 100%;
  height: 20px;
  border-radius: 10px;
}

#barra{
  background-color: green;
  height: 100%;
  width: 0%;
  border-radius: 10px;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Operación</title>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>
  <body>
    <div id="flex">
      <input type="number" id="numero" name="numero"> <!--input con el que se recoge el numero de la operación-->
      <button id="calcular" onclick="calcular();">
        Calcular
      </button>
      <div id="contenedor-barra"> <!--Esta es la barra de progreso-->
        <div id="barra">
          
        </div>
      </div>
      <div id="resultado">
        
      </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

Gracias.

3
  • ¿Qué valor toma 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. Saludos Commented el 10 abr. 2022 a las 15:53
  • @MauricioContreras Vale, ya lo he modificado. Tenía algunos errores como que la fracción (porcentaje) lo calculaba sobre 1 y no sobre 100. En cuanto a la operación, es una operación que se aplica sobre el numero recogido por un input y le suma todos sus numeros enteros anteriores hasta llegar a 0. Pero el error principal aún no está solucionado.
    – user272323
    Commented el 10 abr. 2022 a las 16:18
  • Por cierto @DanielRoucoRodríguez, espero que esta implementación de sumar n números sea solo una prueba de concepto con un for 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órmula Suma = n * (n + 1) / 2 que te da la suma de los números desde el 1 a n con una complejidad computacional de O(1).
    – Jaime
    Commented el 10 abr. 2022 a las 17:26

2 respuestas 2

1

El for loop en javascript es una tarea bloqueante y no podrás hacer nada hasta que se complete el ciclo. El navegador lo que hace por detrás de cámara cada vez que intentas cambiar la interfaz es marcar lo que debe cambiar, y cuando termine el ciclo, entonces actualiza la interfaz.

No es posible actualizar la interfaz dentro del for loop, pero afortunadamente se puede hacer con una combinación de una función iterativa y un setTimeout como te muestro:

var numero;
var resultado;
var porcentaje;
var numerador = 1;

function calcular() {
    // Resetea la barra a 0
    var porcentaje = 0;
    var numerador = 1;
    document.getElementById("barra").style.width = 0


    const numeroi = parseInt(document.getElementById("numero").value);
    numero = parseInt(document.getElementById("numero").value) - 1;
    document.getElementById("resultado").innerHTML = "";
    resultado = numeroi;

    const iterar = (numero) => {
        if (numero > 0) {
            resultado += numero;
            numerador++;
            porcentaje = numerador / numeroi * 100;
            document.getElementById("barra").style.width = `${porcentaje}%`
            setTimeout(() => { iterar(numero - 1) }, 0);
        } else {
            document.getElementById("resultado").innerHTML = resultado;
        }
    }
    iterar(numero);
}
#contenedor-barra{
  background-color: #dedede;
  width: 100%;
  height: 20px;
  border-radius: 10px;
}

#barra{
  background-color: green;
  height: 100%;
  width: 0%;
  border-radius: 10px;
}
<div id="flex">
  <input type="number" id="numero" name="numero" value="1000"> <!--input con el que se recoge el numero de la operación-->
  <button id="calcular" onclick="calcular();">
    Calcular
  </button>
  <div id="contenedor-barra"> <!--Esta es la barra de progreso-->
    <div id="barra">

    </div>
  </div><div id="resultado">

  </div>
</div>

La función se ejecuta, y si no se han completado el número de iteraciones programadas, lo que hace es, programar su próxima ejecución con setTimeout hasta completar el número de iteraciones requerido.

Como habrás comprobado, este código, a pesar de funcionar es MUCHOOO MÁS LEEEENTOOO que el que colocaste en tu pregunta en cuanto a cálculos se trata, y es que actualizar la interfaz es un proceso que cuesta bastante.

¿Cómo mejorar algo estos números?

En realidad no tienes que actualizar la barra en cada iteración, basta con actualizar la barra unas 20-30 veces por segundo, para ello, antes de empezar a iterar, establece un setInterval que irá actualizando la barra durante tus cálculos. Al finalizar las iteraciones, elimina esta actualización continua:

var numero;
var resultado;
var porcentaje;
var numerador = 1;

function calcular() {
    // Resetea la barra a 0
    var porcentaje = 0;
    var numerador = 1;
    document.getElementById("barra").style.width = 0
    var interval = setInterval(() => document.getElementById("barra").style.width = `${porcentaje}%`, 40);


    const numeroi = parseInt(document.getElementById("numero").value);
    numero = parseInt(document.getElementById("numero").value) - 1;
    document.getElementById("resultado").innerHTML = "";
    resultado = numeroi;

    const iterar = (numero) => {
        if (numero > 0) {
            resultado += numero;
            numerador++;
            porcentaje = numerador / numeroi * 100;
            setTimeout(() => { iterar(numero - 1) }, 0);
        } else {
            document.getElementById("resultado").innerHTML = resultado;
            clearInterval(interval);
            document.getElementById("barra").style.width = `${porcentaje}%`
        }
    }
    iterar(numero);
}
#contenedor-barra{
  background-color: #dedede;
  width: 100%;
  height: 20px;
  border-radius: 10px;
}

#barra{
  background-color: green;
  height: 100%;
  width: 0%;
  border-radius: 10px;
}
<div id="flex">
  <input type="number" id="numero" name="numero" value="1000"> <!--input con el que se recoge el numero de la operación-->
  <button id="calcular" onclick="calcular();">
    Calcular
  </button>
  <div id="contenedor-barra"> <!--Esta es la barra de progreso-->
    <div id="barra">

    </div>
  </div><div id="resultado">

  </div>
</div>


Nota: Espero que esta implementación de sumar n números sea solo una prueba de concepto con un for 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órmula S = n * (n + 1) / 2 que te da la suma de los números desde el 1 a n con una complejidad computacional de O(1).

5
  • No es posible actualizar la interfaz dentro del for loop, acabo de mostrar que si se puede. ;) Igual tienes mi +1, ya que tu respuesta es muy completa. Commented el 10 abr. 2022 a las 17:53
  • @MauricioContreras Lo estás haciendo de manera asincronica donde, al encontrar un await ejecuta las actualizaciones pertinentes y continúa luego el ciclo. Te reto a intentarlo sin asincronía. Tu también tienes mi +1, realmente la competencia sana es motivadora XD, y más de con uno de los grandes de SO.
    – Jaime
    Commented el 10 abr. 2022 a las 17:55
  • XD, no creo que no te hayas dado cuenta, pero tu también lo haces de forma asíncrona. Si lees la documentación de setTimeot: setTimeout() is an asynchronous function. Como te dije, ambos códigos hacen básicamente lo mismo. Por más que queramos darle vueltas. :P Commented el 10 abr. 2022 a las 18:01
  • Jajajaj si si, pero bueno, la asincronía no la estoy manejando yo, se maneja detrás en los camerinos XD.
    – Jaime
    Commented el 10 abr. 2022 a las 18:02
  • Gracias a todos. En realidad ahora utilizo la fórmula que es instantánea. Y así no necesito una barra de progreso. Pero de todas formas así he aprendido a "actualizar" algo dentro de un bucle for. Gracias.
    – user272323
    Commented el 11 abr. 2022 a las 9:18
1

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.

4
  • Calcular 1000 números de esa forma tomaría una eternidad. La solución no es mala, pero estás enlenteciendo el algoritmo sin necesidad.
    – Jaime
    Commented el 10 abr. 2022 a las 17:33
  • El valor de ms pasado a setTimeout tiene propósitos didácticos, para mostrar un ejemplo de animación de la barra, no hay diferencia alguna con tu propuesta excepto en el valor de ms. Commented el 10 abr. 2022 a las 17:41
  • Si hay diferencias y bastantes. Tu implementación no estás sujeta para nada a lo que pueda demorar el algoritmo, estás incluyendo un await sleep(100); totalmente sin razón y que no es nada práctico ni muestra el tiempo ni progreso real de lo que estás computando. Estás parando el ciclo por gusto. El usuario quiere que la barra muestre el progreso de sus cálculos, no quiere enlentecer lo más posible su código a 10 iteraciones por segundos. EDIT: Con la edición ahora si está mejor.
    – Jaime
    Commented el 10 abr. 2022 a las 17:46
  • Sostengo que lo hago con fines didácticos, si no quiere añadir tiempo al proceso lo suyo es hacer ms igual a cero. Es lo mínimo para que el navegador pueda refrescar correctamente la barra de progreso. Si el proceso toma mucho tiempo, obviamente al poner un valor alto de ms le estamos añadiendo ese tiempo al proceso. Commented el 10 abr. 2022 a las 17:49

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.