عند إنشاء جافا سكريبت بتنسيق html الذي يستغرق وقتًا طويلاً للمعالجة، هل سبق لك أن قمت بتطبيق ProgressBar وواجهت مشكلة في ProgressBar الذي لا يتحرك إلا بعد اكتمال العملية بأكملها؟

في هذه المقالة، أود أن أقدم مثالاً لإصلاح مؤقت لهذا الموقف.

إذا اتبعت هذه الخطوات، فسيعمل شريط التقدم أثناء المعالجة.

الخطوة 1: ضع العملية بأكملها بطريقة غير متزامنة

أولاً، ضع العملية بأكملها بطريقة غير متزامنة وقم بتنفيذها.

async function MyFunction(ctx, canvas) {

}

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

الخطوة 2: اكتب نومًا بعد تغيير قيمة شريط التقدم

بعد ذلك، اكتب ما يلي بعد تغيير قيمة شريط التقدم.

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

سيؤدي هذا إلى تغيير شريط التقدم أثناء العملية.

لقد قدمنا ​​مثالاً لحل مؤقت لجعل وظيفة ProgressBar تعمل بشكل طبيعي.

آمل أن تساعدك هذه المقالة في حل واحدة على الأقل من معاناتك.

شكرا على القراءة.