Quando você cria javascript em html que leva muito tempo para ser processado, você já implementou uma ProgressBar e teve problemas com a ProgressBar só se movendo depois que todo o processo foi concluído?

Neste artigo, gostaria de apresentar um exemplo de solução temporária para essa situação.

Se você seguir estas etapas, o ProgressBar funcionará durante o processamento.

Etapa 1: coloque todo o processo em um método assíncrono

Primeiro, coloque todo o processo em um método assíncrono e execute-o.

async function MyFunction(ctx, canvas) {

}

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

Etapa 2: Escreva um sleep após alterar o valor da ProgressBar

Em seguida, escreva o seguinte após alterar o valor da ProgressBar.

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

Isso fará com que a ProgressBar mude durante o processo.

Introduzimos um exemplo de solução temporária para fazer o ProgressBar funcionar normalmente.

Espero que este artigo ajude você a resolver pelo menos uma de suas dificuldades.

Obrigado por ler.