Cuando creas javascript en html que tarda mucho en procesarse, ¿alguna vez implementaste una ProgressBar y tuviste problemas con la ProgressBar que solo se movía después de que se completó todo el proceso?

En este artículo, me gustaría presentar un ejemplo de una solución temporal para esa situación.

Si sigues estos pasos, ProgressBar funcionará durante el procesamiento.

Paso 1: Colocar todo el proceso en un método asíncrono

Primero, coloque todo el proceso en un método asíncrono y ejecútelo.

async function MyFunction(ctx, canvas) {

}

MyFunction(ctx, canvas); // Be sure to run it in the original location.

Paso 2: Escribe un sueño después de cambiar el valor de ProgressBar

A continuación, escribe lo siguiente después de cambiar el valor de ProgressBar.

const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))
await sleep(0);

Esto hará que la barra de progreso cambie durante el proceso.

Hemos presentado un ejemplo de una solución temporal para que ProgressBar funcione normalmente.

Espero que este artículo te ayude a resolver al menos uno de tus problemas.

Gracias por leer.