When you create javascript in html that takes a long time to process, have you ever implemented a ProgressBar and had trouble with the ProgressBar only moving after the entire process was complete?

In this article, I would like to introduce an example of a temporary fix for that situation.

If you follow these steps, the ProgressBar will work during processing.

Step 1: Place the entire process in an async method

First, place the entire process in an async method and execute it.

async function MyFunction(ctx, canvas) {

}

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

Step 2: Write a sleep after changing the ProgressBar's Value

Next, write the following after changing the ProgressBar's Value.

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

This will cause the ProgressBar to change during the process.

We have introduced an example of a temporary solution to make the ProgressBar function normally.

I hope this article will help you solve at least one of your struggles.

Thank you for reading.