اليوم ، يتم تنفيذ عملية تحميل شريط التقدم ، وهيكل DOM هو في الواقع divs
<viv> <div id = "٪_bar"> </viv> </viv>
من خلال التحكم في سمة العرض الواسعة لـ Div الداخلي ، يمكنك تحقيق تأثير المضي قدمًا في شريط التقدم.
يعرض شريط التقدم الخاص بي تقدم تنزيل الملفات. إذا قمت ببساطة بتنفيذ ما مجموعه 100 ملف ، فإن تنزيل واحد سيكون 1 ٪ ، وسيصل تنزيل 20 إلى 20 ٪. لذلك يتم تنفيذ الرمز على النحو التالي:
var fileCount = fileList.length () ؛ fileList.foreach (function (i ، obj) {..... // تنزيل ملف مستند.ولكن سترى الملفات التي تم تنزيلها واحدًا تلو الآخر ، لكن التقدم لم يتحرك. هذا لأنه سيتم تنفيذ منطق JS أولاً ، وسيتم إجراء عرض الصفحة فقط بعد انتهاء تنفيذ JS ، لذلك لا يمكنك رؤية شريط التقدم العادي.
كيف يمكنني جعل JS Logic تنفيذ وانتظار تقديم صفحة من الدرجة الأولى؟
var i = 0 ؛ var fileCount = fileList.length () ؛ var loop = function () {if (i> fileCount) // exit the loop return ؛ ...... // تنزيل ملف i ++ ؛ document.getElementById ("٪_bar"). style.width = i/fileCount*100+"٪" ؛ // الحلقة التالية that.loopid = window.settimeout (loop ، 0) ؛ 7} that.loopid = window.settimeout (loop ، 0) ؛يمكن تحقيق التأثير الديناميكي لشريط التقدم من خلال وظيفة setTimeout.
تحل المقالة أعلاه بسرعة مشكلة تقديم الصفحات في الوقت المناسب بعد تغيير سمات عناصر DOM بشكل ديناميكي بواسطة JS هو كل المحتوى الذي يشاركه المحرر. آمل أن يمنحك مرجعًا وآمل أن يتمكن الجميع من دعم wulin.com أكثر.