[Javascript] Elakkan fenomena di mana ProgressBar tidak bergerak (ia hanya bergerak selepas satu siri proses selesai)

Apabila anda mencipta javascript dalam html yang mengambil masa yang lama untuk diproses, adakah anda pernah melaksanakan ProgressBar dan menghadapi masalah dengan ProgressBar hanya bergerak selepas keseluruhan proses selesai?

Dalam artikel ini, saya ingin memperkenalkan contoh pembaikan sementara untuk situasi itu.

Jika anda mengikuti langkah ini, ProgressBar akan berfungsi semasa pemprosesan.

Langkah 1: Letakkan keseluruhan proses dalam kaedah async

Pertama, letakkan keseluruhan proses dalam kaedah async dan laksanakannya.

async function MyFunction(ctx, canvas) {

}

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

Langkah 2: Tulis tidur selepas menukar Nilai ProgressBar

Seterusnya, tulis yang berikut selepas menukar Nilai ProgressBar.

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

Ini akan menyebabkan ProgressBar berubah semasa proses.

Kami telah memperkenalkan contoh penyelesaian sementara untuk menjadikan ProgressBar berfungsi secara normal.

Saya harap artikel ini akan membantu anda menyelesaikan sekurang-kurangnya satu daripada perjuangan anda.

Terima kasih kerana membaca.

Atas ialah kandungan terperinci [Javascript] Elakkan fenomena di mana ProgressBar tidak bergerak (ia hanya bergerak selepas satu siri proses selesai). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!