Memahami Segerak dan Tidak Segerak dalam JavaScript - Bahagian 2
Di bahagian pertama jawatan ini, kita melihat bagaimana konsep sinkron dan tak segerak dilihat dalam JavaScript. Di bahagian kedua ini, Encik X muncul sekali lagi untuk membantu kita memahami bagaimana setTimeout dan AJAX API kerja.
Permintaan ganjil
Mari kita kembali ke kisah Encik X dan filem yang anda mahu pergi. Katakanlah anda meninggalkan tugas untuk Encik X sebelum lawatan itu, dan beritahu dia bahawa dia hanya boleh mula menjalankan tugas ini lima jam selepas dia mendapat mesej anda.
Dia tidak gembira mengenainya, ingat, dia tidak mengambil mesej baru sehingga dia selesai dengan yang sekarang, dan jika dia mengambil milikmu, dia mesti menunggu lima Jam untuk memulakan tugas. Jadi, untuk tidak membazir masa, dia membawa pembantu, Encik H.
Daripada menunggu, dia bertanya kepada Encik H meninggalkan mesej baru untuk tugas dalam barisan selepas waktu tertentu telah berlalu, dan bergerak ke mesej seterusnya.
Lima jam lalu; Encik H mengemas kini barisan dengan mesej baru. Selepas dia selesai memproses semua mesej terakru sebelum Encik H, Encik X menjalankan tugas anda yang diminta. Jadi, dengan cara ini, anda boleh meninggalkan permintaan untuk menjadi dipatuhi kemudian, dan jangan tunggu sehingga ia dipenuhi.
Tetapi mengapa Encik H meninggalkan mesej dalam barisan itu bukannya terus menghubungi Encik X? Kerana seperti yang saya nyatakan di bahagian pertama, yang sahaja cara menghubungi Encik X adalah dengan meninggalkan mesej kepadanya melalui panggilan telefon - tiada pengecualian.
1. The setTimeout () kaedah
Katakan anda mempunyai satu set kod yang anda mahu laksanakan selepas waktu tertentu. Untuk melakukan itu, anda hanya bungkusnya dalam fungsi, dan tambahnya kepada a setTimeout () kaedah bersama-sama dengan masa tunda. Sintaks setTimeout () adalah seperti berikut:
setTimeout (fungsi, masa tunda, arg ...)
The arg ... parameter bermaksud sebarang argumen yang diperlukan, dan masa tunda akan ditambah dalam milisaat. Di bawah ini anda dapat melihat contoh kod mudah, output itu “Hey” di konsol selepas 3 saat.
setTimeout (function () console.log ('hey'), 3000); Sekali lagi setTimeout () mula berjalan, bukannya menyekat stack panggilan sehingga masa kelewatan yang dinyatakan berakhir, a pemasa dicetuskan, dan timbunan panggilan secara berperingkat dikosongkan untuk mesej seterusnya (sama dengan surat-menyurat antara Encik X dan Encik H).
Apabila pemasa tamat tempoh, mesej baru menyertai barisan, dan gelung acara mengambilnya apabila timbunan panggilan adalah percuma selepas memproses semua mesej sebelum itu - oleh itu kod tersebut berjalan secara asynchronously.
2. AJAX
AJAX (Asynchronous JavaScript dan XML) adalah konsep yang menggunakan XMLHttpRequest API (XHR) kepada buat permintaan pelayan dan mengendalikan respons.
Apabila penyemak imbas membuat permintaan pelayan tanpa menggunakan XMLHttpRequest, menyegarkan halaman dan tambah semula UInya. Apabila pemprosesan permintaan dan tindak balas dikendalikan oleh API XHR, dan UI kekal tidak terjejas.
Jadi, pada asasnya matlamatnya adalah membuat permintaan tanpa memuat semula halaman. Sekarang, di mana “asynchronous” di dalam ini? Hanya menggunakan kod XHR (yang akan kita lihat dalam sekejap) tidak bermakna ia adalah AJAX, kerana API XHR boleh bekerja dalam kedua-dua cara segerak dan tidak segerak.
XHR secara lalai ditetapkan untuk bekerja secara serentak; apabila fungsi membuat permintaan menggunakan XHR, ia pulangan tanpa menunggu respon.
Jika XHR dikonfigurasi untuk menjadi segerak, maka fungsi itu menunggu sehingga tindak balas diterima dan diproses sebelum pulang.
Kod Contoh 1
Contoh ini membentangkan satu XMLHttpRequest penciptaan objek. The buka() kaedah, mengesahkan URL permintaan, dan hantar () kaedah menghantar permintaan.
var xhr = XMLHttpRequest baru (); xhr.open ("GET", url); xhr.send (); Sebarang akses langsung kepada data tindak balas selepas hantar () akan sia-sia, kerana hantar () tidak menunggu sehingga permintaan selesai. Ingat, XMLHTTPRequest ditetapkan untuk berfungsi secara asynchronously secara lalai.
Contoh Kod 2
The hello.txt fail dalam contoh ini adalah fail teks mudah yang mengandungi teks 'hello'. The tindak balas harta XHR adalah tidak sah, kerana ia tidak mengeluarkan teks 'hello'.
var xhr = XMLHttpRequest baru (); xhr.open ("GET", "hello.txt"); xhr.send (); document.write (xhr.response); // baris kosong XHR melaksanakan rutin mikro itu terus menyemak tindak balas dalam setiap milisaat, dan mencetuskan peristiwa percuma untuk negeri-negeri yang berlainan permintaan diminta. Apabila respons dimuatkan, peristiwa beban dipicu oleh XHR, yang dapat memberikan respons yang sah.
var xhr = XMLHttpRequest baru (); xhr.open ("GET", "hello.txt"); xhr.send (); xhr.onload = function () document.write (this.response) // menulis 'hello' pada dokumen Sambutan di dalam acara beban output 'hello', teks yang betul.
Melakukan cara asynchronous adalah pilihan, kerana ia tidak menghalang skrip lain sehingga permintaan selesai.
Sekiranya respon itu perlu diproses serentak, kami lulus salah sebagai hujah terakhir buka, yang mana membenderkan API XHR mengatakannya mestilah bersesuaian (secara lalai hujah terakhir buka adalah benar, yang anda tidak perlu menyatakan secara jelas).
var xhr = XMLHttpRequest baru (); xhr.open ("GET", "hello.txt", false); xhr.send (); document.write (xhr.response); / // menulis 'hello' untuk mendokumentasikan Mengapa belajar semua ini?
Hampir semua pemula membuat beberapa kesilapan dengan konsep asynchronous seperti setTimeout () dan AJAX, contohnya dengan menganggap setTimeout () melaksanakan kod selepas masa tunda, atau dengan memproses respons langsung di dalam fungsi yang membuat permintaan AJAX.
Jika anda tahu bagaimana teka-teki sesuai, anda boleh elakkan kekeliruan itu. Anda tahu bahawa masa tunda dalam setTimeout () tidak menunjukkan masa apabila pelaksanaan kod bermula, tetapi masa apabila pemasa tamat tempoh dan mesej baru disandarkan, yang hanya akan diproses apabila timbunan panggilan bebas untuk melakukannya.
