This content originally appeared on DEV Community and was authored by uni928
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.
This content originally appeared on DEV Community and was authored by uni928
uni928 | Sciencx (2024-08-16T01:06:36+00:00) [Javascript] Avoid the phenomenon where the ProgressBar does not move (it only moves after a series of processes are completed). Retrieved from https://www.scien.cx/2024/08/16/javascript-avoid-the-phenomenon-where-the-progressbar-does-not-move-it-only-moves-after-a-series-of-processes-are-completed/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.