Selesaikan dengan cepat masalah rendering halaman yang tepat waktu setelah secara dinamis mengubah atribut elemen DOM oleh JS

Saat ini, proses pemuatan batang kemajuan diimplementasikan, dan struktur DOM sebenarnya adalah dua divs

 <div> <div id = "persen_bar"> </div> </div>

Dengan mengendalikan atribut lebar lebar dari div dalam, Anda dapat mencapai efek bergerak maju pada bilah kemajuan.

Bilah kemajuan saya menunjukkan kemajuan mengunduh file. Jika Anda cukup menerapkan total 100 file, mengunduh satu akan menjadi 1%, dan mengunduh 20 akan mencapai 20%. Jadi kode diimplementasikan sebagai berikut:

 var filecount = filelist.length (); filelist.foreach (function (i, obj) {..... // unduh file document.geteLementById ("persen_bar"). style.width = i/filecount*100 + "%"; // Ubah lebar div dalam})

Tetapi Anda akan melihat file yang diunduh satu per satu, tetapi kemajuannya belum bergerak. Ini karena logika JS akan dieksekusi terlebih dahulu, dan rendering halaman akan dilakukan hanya setelah eksekusi JS selesai, jadi Anda tidak dapat melihat bilah kemajuan yang normal.

Bagaimana cara membuat logika JS dieksekusi dan menunggu rendering halaman kelas satu?

 var i = 0; var filecount = fileList.length (); var loop = function () {if (i> filecount) // Keluar dari pengembalian loop; ...... // Unduh file i ++; document.geteLementById ("persen_bar"). style.width = i/filecount*100+"%"; // loop berikutnya itu.loopid = window.setTimeout (loop, 0); 7} that.loopid = window.setTimeout (loop, 0);

Efek dinamis dari bilah kemajuan dapat dicapai melalui fungsi setTimeout.

Artikel di atas dengan cepat memecahkan masalah rendering halaman yang tepat waktu setelah secara dinamis mengubah atribut elemen DOM oleh JS adalah semua konten yang dibagikan oleh editor. Saya harap ini dapat memberi Anda referensi dan saya harap semua orang dapat lebih mendukung wulin.com.