Когда вы создаете JavaScript в HTML, обработка которого занимает много времени, вы когда-нибудь реализовывали ProgressBar и сталкивались с проблемой, когда ProgressBar перемещался только после завершения всего процесса?

В этой статье я хотел бы представить пример временного решения этой ситуации.

Если вы выполните эти шаги, ProgressBar будет работать во время обработки.

Шаг 1. Поместите весь процесс в асинхронный метод

Сначала поместите весь процесс в асинхронный метод и выполните его.

async function MyFunction(ctx, canvas) {

}

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

Шаг 2. Напишите сон после изменения значения ProgressBar

Далее после изменения значения ProgressBar напишите следующее.

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

Это приведет к изменению ProgressBar во время процесса.

Мы представили пример временного решения, позволяющего нормально функционировать ProgressBar.

Надеюсь, эта статья поможет вам решить хотя бы одну из ваших проблем.

Спасибо, что читаете.