[Javascript] Avoid the phenomenon where the ProgressBar does not move (it only moves after a series of processes are completed)
#javascript#progressbar#html#webdev
uni928

uni928 @uni928

About: I am working under the Japanese Type A Continuing Employment Support Program. Recently I've been active on the Unity Asset Store. We would like to share the information here as well. Thank you.

Joined:
Jul 12, 2024

[Javascript] Avoid the phenomenon where the ProgressBar does not move (it only moves after a series of processes are completed)

Publish Date: Aug 16 '24
0 0

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.
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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.

Comments 0 total

    Add comment