Memahami Sinkronisasi dan Asinkron dalam JavaScript - Bagian 2
Di bagian pertama posting ini, kami melihat bagaimana konsep sinkron dan asinkron dirasakan dalam JavaScript. Di bagian kedua ini, Tuan X muncul lagi untuk membantu kita memahami bagaimana setTimeout dan AJAX Lebah kerja.
Permintaan aneh
Mari kita kembali ke kisah tentang Tuan X dan film yang ingin Anda tinggalkan. Katakan Anda meninggalkan tugas untuk Tuan X sebelum jalan-jalan, dan katakan padanya bahwa ia hanya bisa mulai mengerjakan tugas ini lima jam setelah dia menerima pesanmu.
Dia tidak senang tentang itu, ingat, dia tidak menerima pesan baru sampai dia selesai dengan yang sekarang, dan jika dia menerima pesanmu, dia harus menunggu lima jam untuk memulai tugas. Jadi, agar tidak boros waktu, ia membawa pembantu, Tuan H.
Alih-alih menunggu, dia meminta Mr H untuk tinggalkan pesan baru untuk tugas di antrian setelah waktu yang diberikan berlalu, dan beralih ke pesan berikutnya.
Lima jam yang lalu; Tuan H memperbarui antrian dengan pesan baru. Setelah dia selesai memproses semua pesan yang terkumpul sebelum Tn. H, Tn. X melakukan tugas yang Anda minta. Jadi, dengan cara ini, Anda dapat meninggalkan permintaan dipatuhi di lain waktu, dan tidak menunggu sampai itu terpenuhi.
Tetapi mengapa Tuan H meninggalkan pesan di antrian alih-alih langsung menghubungi Tuan X? Karena seperti yang saya sebutkan di bagian pertama, the hanya cara untuk menghubungi Mr X adalah dengan meninggalkan pesan padanya via panggilan telepon - tidak ada pengecualian.
1. The setTimeout () metode
Misalkan Anda memiliki seperangkat kode yang Anda inginkan mengeksekusi setelah waktu tertentu. Untuk melakukan itu, Anda hanya bungkus dalam suatu fungsi, dan tambahkan ke a setTimeout () metode seiring dengan waktu tunda. Sintaks dari setTimeout () adalah sebagai berikut:
setTimeout (fungsi, waktu tunda, arg ...)
Itu arg ... parameter berarti argumen apa pun yang diambil fungsi, dan waktu penundaan harus ditambahkan dalam milidetik. Di bawah ini Anda dapat melihat contoh kode sederhana, yaitu keluaran “Hei” di konsol setelah 3 detik.
setTimeout (function () console.log ('hey'), 3000); Sekali setTimeout () mulai berlari, alih-alih memblokir tumpukan panggilan sampai waktu tunda yang ditunjukkan selesai, a Timer dipicu, dan tumpukan panggilan secara bertahap dikosongkan untuk pesan berikutnya (mirip dengan korespondensi antara Mr X dan Mr H).
Ketika penghitung waktu berakhir, pesan baru bergabung dengan antrian, dan loop acara mengambilnya ketika tumpukan panggilan gratis setelah memproses semua pesan sebelum itu - sehingga kode berjalan secara tidak sinkron.
2. AJAX
AJAX (Asynchronous JavaScript and XML) adalah konsep yang menggunakan XMLHttpRequest (XHR) API ke membuat permintaan server dan menangani tanggapan.
Ketika browser membuat permintaan server tanpa menggunakan XMLHttpRequest, refresh halaman dan memuat ulang UI-nya. Ketika pemrosesan permintaan dan tanggapan ditangani oleh XHR API, dan UI tetap tidak terpengaruh.
Jadi, pada dasarnya tujuannya adalah untuk membuat permintaan tanpa memuat ulang halaman. Sekarang dimana “tidak sinkron” di dalam? Hanya menggunakan kode XHR (yang akan kita lihat sebentar lagi) tidak berarti itu AJAX, karena API XHR bisa bekerja dengan cara sinkron dan asinkron.
XHR secara default diatur ke bekerja secara serempak; ketika suatu fungsi membuat permintaan menggunakan XHR, itu kembali tanpa menunggu respons.
Jika XHR dikonfigurasi untuk sinkron, kemudian fungsi menunggu sampai tanggapan diterima dan diproses sebelum kembali.
Contoh Kode 1
Contoh ini menyajikan suatu XMLHttpRequest pembuatan objek. Itu Buka() metode, memvalidasi URL permintaan, dan Kirim() metode mengirim permintaan.
var xhr = XMLHttpRequest () baru; xhr.open ("GET", url); xhr.send (); Akses langsung ke data respons setelah Kirim() akan sia-sia, karena Kirim() tidak menunggu sampai permintaan selesai. Ingat, XMLHTTPRequest diatur untuk bekerja secara tidak sinkron secara default.
Contoh Kode 2
Itu hello.txt File dalam contoh ini adalah file teks sederhana yang berisi teks 'halo'. Itu tanggapan properti XHR tidak valid, karena tidak menghasilkan teks 'halo'.
var xhr = XMLHttpRequest () baru; xhr.open ("GET", "hello.txt"); xhr.send (); document.write (xhr.response); // string kosong XHR mengimplementasikan mikro-rutin itu terus memeriksa respons dalam setiap milidetik, dan memicu acara gratis untuk negara-negara yang berbeda permintaan harus melalui. Ketika respons dimuat, acara memuat dipicu oleh XHR, yang dapat memberikan respons yang valid.
var xhr = XMLHttpRequest () baru; xhr.open ("GET", "hello.txt"); xhr.send (); xhr.onload = function () document.write (this.response) // menulis 'halo' ke dokumen Respons di dalam acara memuat keluaran 'halo', teks yang benar.
Pergi dengan cara yang tidak sinkron lebih disukai, karena tidak memblokir skrip lain sampai permintaan selesai.
Jika respons harus diproses secara sinkron, kami sampaikan Salah sebagai argumen terakhir Buka, yang menandai API XHR mengatakannya harus sinkron (secara default argumen terakhir dari Buka aku s benar, yang tidak perlu Anda tentukan secara eksplisit).
var xhr = XMLHttpRequest () baru; xhr.open ("GET", "hello.txt", false); xhr.send (); document.write (xhr.response); // menulis 'halo' untuk didokumentasikan Mengapa mempelajari semua ini?
Hampir semua pemula membuat beberapa kesalahan dengan konsep asinkron seperti setTimeout () dan AJAX, misalnya dengan asumsi setTimeout () mengeksekusi kode setelah waktu tunda, atau dengan memproses respons langsung di dalam fungsi yang membuat permintaan AJAX.
Jika Anda tahu bagaimana puzzle cocok, Anda bisa hindari kebingungan seperti itu. Anda tahu bahwa waktu tunda di setTimeout () tidak menunjukkan waktu ketika eksekusi kode dimulai, tapi waktu saat timer kedaluwarsa dan pesan baru diantrikan, yang hanya akan diproses ketika tumpukan panggilan bebas untuk melakukannya.
