Bila dan Mengapa Gunakan `setTimeout(fn, 0)` dalam JavaScript?

Memahami Utiliti setTimeout(fn, 0)

Pertemuan baru-baru ini dengan pepijat pelik menyerlahkan keberkesanan sekali-sekala menggunakan setTimeout(fn , 0) dalam JavaScript. Dalam kes ini, isu itu timbul apabila cuba memuatkan elemen dengan nilai pra-pilihan.

Dalam Internet Explorer 6, indeks yang dipilih akan kerap dinyahsegerakkan dengan nilai Indeks terpilih . Kod berikut pada mulanya digunakan untuk membetulkan isu ini:

field.selectedIndex = element.index; Walau bagaimanapun, kod ini gagal menyelesaikan masalah. Semasa field.selectedIndex sedang ditetapkan dengan tepat, pilihan yang salah tetap dipilih. Menambah penyataan makluman() pada titik strategik membetulkan isu itu, mencadangkan kemungkinan kebimbangan masa.

Untuk menangani perkara ini, teknik yang tidak lazim digunakan:

var wrapFn = (function() { var myField = field; var myElement = element;

return function() { myField.selectedIndex = myElement.index; } })(); setTimeout(wrapFn, 0); Pendekatan ini terbukti berjaya.

Isu Asas

Masalah asal berpunca daripada keadaan perlumbaan antara dua proses:

Pelayar memulakan senarai juntai bawah untuk menerima kemas kini pada indeks yang dipilih. Kod JavaScript yang cuba mengubah suai indeks yang dipilih. Dalam kebanyakan kes, kod akan dilaksanakan sebelum penyemak imbas melengkapkan pemulaan, yang membawa kepada penyahsegerakan isu.

Cara setTimeout(fn, 0) Menyelesaikan Isu

Penyelesaian yang diperkenalkan oleh setTimeout berfungsi dengan menjadualkan fungsi panggil balik untuk dijalankan secara tidak segerak selepas kelewatan yang sangat singkat ( biasanya sekitar 10ms). Ini membolehkan penyemak imbas masa yang mencukupi untuk memulakan DOM, memastikan kod JavaScript berjalan apabila senarai juntai bawah sedia untuk dikemas kini.

Dengan melambatkan pelaksanaan kod dengan jumlah yang kecil, keadaan perlumbaan adalah dielakkan dan indeks yang dipilih ditetapkan dengan betul.

Potensi Kaveat

Perlu diperhatikan bahawa penyelesaian ini secara khusus menangani keanehan yang dipamerkan oleh versi awal Internet Explorer. Selain itu, pepijat tulen dalam pangkalan kod juga mungkin memerlukan penyelesaian sedemikian.

Untuk penerokaan yang lebih mendalam tentang topik ini, rujuk ceramah Philip Roberts "What the Heck is the Event Loop?" yang memberikan penjelasan menyeluruh tentang mekanisme gelung peristiwa dalam JavaScript.