Penjelasan Soalan Temu Bual Javascript -Tingkah Laku Tak Segerak

Kelakuan Asynchronous JavaScript dengan setTimeout

pengenalan

Dalam artikel ini, kami akan meneroka sekeping kod JavaScript yang menarik yang menunjukkan sifat tak segerak bahasa, terutamanya cara penutupan dan fungsi setTimeout berfungsi bersama-sama. Jika anda pernah keliru dengan sebab gelung anda menghasilkan hasil yang tidak dijangka, anda berada di tempat yang betul!

Konsep Utama

Sebelum menyelami kod, Mari bincangkan beberapa konsep.

Pengaturcaraan Asynchronous:

JavaScript adalah satu-benang, bermakna ia hanya boleh melaksanakan satu keping kod pada satu masa. Walau bagaimanapun, ia boleh mengendalikan operasi tak segerak, membenarkan tugasan tertentu dijalankan di latar belakang sementara utas utama terus dilaksanakan.

SetTimeout

Fungsi ini digunakan untuk melaksanakan sekeping kod selepas kelewatan yang ditentukan. Ia memerlukan dua parameter: fungsi panggil balik dan kelewatan dalam milisaat.

Penutupan

Penutupan ialah fungsi yang mengekalkan akses kepada skop leksikalnya, walaupun apabila fungsi tersebut dilaksanakan di luar skop tersebut. Ini penting untuk memahami cara pembolehubah diakses dalam panggilan balik tak segerak.

for (var i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i);
  }, i * 1000);
}

Sebelum kita menyelami butirannya, luangkan masa untuk melihat coretan kod ini. Cuba teka apakah outputnya berdasarkan pemahaman semasa anda. Pendekatan ini bukan sahaja membantu mengukuhkan kemahiran JavaScript anda tetapi juga menjadikan penjelasan berikut lebih bermakna

Fikirkan tentang cara JavaScript akan memproses setiap baris. Sebaik sahaja anda membuat tekaan anda, teruskan membaca untuk mengetahui sama ada anda betul!

Penjelasan

Biar pecahkan kod langkah demi langkah:

Pelaksanaan Gelung : Gelung berjalan lima kali, menambah i daripada 0 kepada 4.

setTimeout: Untuk setiap nilai i, setTimeout dijadualkan untuk log i selepas i * 1000 milisaat.

Penutupan: Pada masa panggilan balik setTimeout dilaksanakan, gelung telah selesai dan i mempunyai nilai akhir 5. Oleh itu, semua panggilan balik akan log 5.

Apa yang anda mungkin kecuali

0
1
2
3
4

Apa yang Sebenarnya Berlaku

5
5
5
5
5

Walau bagaimanapun, ini bukan output sebenar yang anda akan lihat. Sebabnya ialah tingkah laku JavaScript biasa yang berkaitan dengan skop pembolehubah i .

Dalam kod yang disediakan, pembolehubah i diisytiharkan menggunakan var, yang bermaksud ia mempunyai skop fungsi. Apabila fungsi setTimeout() dilaksanakan, gelung telah pun selesai dan nilai i adalah 5. Oleh itu, semua fungsi setTimeout() akan log nilai 5 ke konsol, tanpa mengira kelewatan.

Membetulkan Isu

Untuk mencapai output yang dijangkakan 0, 1, 2, 3, 4,

• anda boleh menggunakan Ungkapan Fungsi Segera Diminta (IIFE) untuk mencipta skop baharu bagi setiap lelaran.
• Kita boleh menggunakan kata kunci let dan bukannya var.

Penyelesaian

Ungkapan Fungsi Dipanggil Serta-merta

for (var i = 0; i < 5; i++) {
  (function(i) {
    setTimeout(function() {
      console.log(i);
    }, i * 1000);
  })(i);
}

Kini, setiap setTimeout akan menangkap nilai semasa i, dan outputnya ialah:

0
1
2
3
4

Dengan Menggunakan kata kunci Let

Kata kunci let mencipta pembolehubah berskop blok, yang bermaksud bahawa setiap lelaran gelung akan mempunyai salinan pembolehubah i nya sendiri dan fungsi setTimeout() akan menangkap nilai i yang betul untuk setiap lelaran.

Kesimpulan

Memahami cara JavaScript mengendalikan operasi dan penutupan tak segerak adalah penting untuk menulis kod yang berkesan. Coretan kod asal berfungsi sebagai contoh yang bagus tentang cara fungsi setTimeout berinteraksi dengan pembolehubah gelung i. Dengan menggunakan IIFE, kami boleh memastikan bahawa setiap tamat masa mencatatkan nilai yang betul. Jadi, apabila anda menghadapi situasi yang serupa, ingat kuasa penutupan dan cara ia boleh membantu anda mengurus tingkah laku tak segerak dalam JavaScript

Misi Dicapai: Membongkar Kod!

Saya harap penjelasan ini bukan sahaja menjelaskan kod tetapi juga mencetuskan rasa ingin tahu untuk meneroka lebih lanjut. JavaScript penuh dengan kejutan dan alatan yang berkuasa, dan setiap bahagian yang anda pelajari membawa anda lebih dekat untuk menguasainya.

Terima kasih kerana membaca

Saya harap anda menikmati pecahan ini! Jangan ragu untuk berkongsi pendapat, soalan atau idea anda untuk topik akan datang dalam ulasan.

Selamat Pengekodan

Jika anda menyukai artikel tersebut dan ingin menunjukkan sokongan anda, pastikan anda:

Ikuti saya

Atas ialah kandungan terperinci Penjelasan Soalan Temu Bual Javascript -Tingkah Laku Tak Segerak. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!