Mengapa Anda membutuhkan asinkron? Mengapa? Mari kita lihat sepotong kode.
Pertanyaan 1:
untuk (var i = 0; i <100000; i ++) {} alert ('Hello World !!!');Kode ini berarti mengeksekusi 100 kali sebelum mengeksekusi peringatan. Masalah yang ditimbulkannya adalah secara serius memblokir eksekusi kode selanjutnya. Adapun alasannya, itu terutama karena JS berhadapan tunggal.
Pertanyaan 2:
Kita biasanya perlu menyelesaikan masalah ini. Jika kita perlu menambahkan kode skrip ke kepala, kita biasanya akan menulis kode di window.onload (jika DOM dioperasikan). Pernahkah Anda memikirkan mengapa kami perlu menambahkan window.onload ? Alasannya adalah ketika Anda mengoperasikan DOM, browser kode HTML di belakang skrip belum mulai memuat, tetapi Anda berpikir untuk menikahinya sebelum dia dilahirkan. Apakah ini mungkin? Tentu saja tidak mungkin, tambahkan jendela. Alasan mengapa onload bisa karena kode di window.onload dieksekusi setelah dokumen sepenuhnya dimuat, yang setara dengan asinkron.
Pertanyaan 3:
Terkadang halaman tidak perlu memuat semua kode sekaligus, tetapi lebih sering kami hanya memuat sepotong kode tertentu sesuai dengan persyaratan tertentu.
Apa itu utas tunggal?
Anda dapat memahami cara ini bahwa satu utas adalah pelaksanaan segmen kode, pertama -tama mengeksekusi yang sebelumnya, dan kemudian mengeksekusi yang berikutnya setelah yang sebelumnya selesai.
Jadi JS mana yang asinkron?
Saya percaya bahwa hal ini hampir digunakan dengan buruk. Ini adalah SetTimeout/SetInterval dan tentu saja Ajax. Saya percaya semua orang tahu Ajax asinkron. Tentu saja, itu juga bisa sinkron, tetapi tidak ada yang melakukannya seperti itu. Namun, beberapa teman mungkin tidak tahu secara berbeda tentang setTimeout dan setInterval sebagai sinkron. Mari kita bicarakan mengapa SetTimeout asinkron.
setTimeout (function () {console.log (0);}, 0) console.log (1); // 1 // 0 Setelah menjalankan kode ini, cetakan pertama 1 bukan 0. Apakah beberapa teman mulai bingung? Meskipun kami mengatur setTimeout untuk mengeksekusi console.log(0) setelah 0 detik, setTimeout sangat istimewa karena asinkron. Mari kita singkirkan mengapa cetakannya 1 dan kemudian 0. Mari kita bicara tentang apa yang asinkron.
Apa itu Asynchronous?
Misalnya, di beberapa restoran, Anda perlu melakukan reservasi terlebih dahulu, dan Anda hanya bisa pergi ketika orang lain selesai makan. Karena itu, ketika orang lain makan, Anda dapat melakukan hal -hal lain. Ketika orang lain selesai makan, seseorang akan memberi tahu Anda, sehingga Anda bisa pergi. Untuk kode, seperti AJAX, Anda mendefinisikan metode panggilan balik. Metode panggilan balik ini tidak akan dieksekusi pada saat itu, tetapi akan menunggu respons server diselesaikan sebelum menjalankan kode ini.
Mari kita kembali ke bagian SetTimeout sebelumnya. Ini berfungsi seperti ini. Dari saat Anda mendefinisikan SetTimeout (terlepas dari apakah waktunya 0 atau tidak), JS tidak akan secara langsung menjalankan kode ini, tetapi akan melemparkannya ke antrian acara. Hanya setelah semua tugas sinkronisasi pada halaman selesai, kode dalam antrian acara akan dieksekusi. Apa itu sinkronisasi? Terlepas dari kode asinkron, ini adalah sinkronisasi -_-.
Bagaimana cara mengimplementasikan JS asinkron?
1. Gunakan setTimout untuk mencapai asinkron
setTimeout (function () {console.log (document.geteLementByTagname ('body') [0]);}, 0)Tetapi ada masalah kecil dengan SetTimeout, yaitu saat itu tidak akurat. Jika Anda ingin menjalankan kode ini lebih cepat, kami dapat menggunakan fungsi yang disediakan oleh HTML5.
requestAnimationFrame (function () {console.log (document.geteLementByTagname ('body') [0]);})Perbedaan antara RequestAnimationFrame dan SetTimeout adalah bahwa RequestAnimationFrame dieksekusi lebih cepat daripada SetTimeout , sehingga banyak orang menggunakan RequestAnimationFrame untuk membuat animasi.
2. Secara dinamis buat tag skrip
var head = document.getElementByTagname ('head') [0]; var skrip = document.createElement ('script'); skrip.src = 'menzhuzi.js'; head.applependChild ('skrip');3. Gunakan tunduk/async yang disediakan oleh skrip
<Script src = "xx.js" Defer> </script>
DISHER: Kode ini dieksekusi hanya setelah halaman dimuat.
<skrip src = "xx.js" async> </script>
async: jalankan kode skrip secara asinkron
Namun, asinkron juga merupakan kerugian, seperti kode berikut:
Kode Normal:
coba {lempar kesalahan baru ('halo dunia');} catch (err) {console.log (err);} // error: hello world (...)Kode asinkron:
coba {settimout (function () {throw new error ('hello world');}, 0)} catch (err) {console.log (err);} // referensiError: settimout tidak ditentukan (...)Dapat ditemukan bahwa kode dalam tangkapan tidak dieksekusi, yang berarti bahwa percobaan tidak dapat menangkap kode dalam asinkron.
Meringkaskan
Asynchronous di JS dan bagaimana mencapai ini pada dasarnya sudah berakhir. Ini adalah klise tentang JS Asynchronous, tetapi saya masih berharap bahwa konten artikel ini akan membantu semua orang.