JavaScript'te Eşzamanlı ve Eşzamansız Anlamak - Bölüm 2
Bu yazının ilk bölümünde, nasıl olduğunu gördük. senkron ve asenkron kavramları algılanıyor JavaScript’te. Bu ikinci bölümde, Bay X, anlamamıza yardımcı olmak için tekrar belirir. setTimeout ve AJAX nasıl yapılır? API'ler iş.
Garip bir istek
Bay X'in ve ayrılmak istediğiniz filmin hikayesine geri dönelim. Gezinmeden önce Bay X için bir görev bıraktığınızı ve ona yalnızca bu görev üzerinde çalışmaya başlayabileceğini söyleyin. beş saat sonra mesajını aldı.
Bundan memnun değil, unutma, şu anki yerine getirilinceye kadar yeni bir mesaj almadı. beklemek zorunda beş saatler göreve başlamak bile. Yani, zamanını boşa harcamamak için, o bir yardımcı getiriyor, Bay H.
Beklemek yerine, Bay H’dan sıradaki görev için yeni bir mesaj bırak verilen saatler geçtikten ve bir sonraki mesaja geçtikten sonra.
Beş saat geçmiş; Bay H kuyruğu günceller yeni bir mesajla. H tahakkuk ettirilen mesajları önce tamamladıktan sonra, Bay X. istenen görevi yerine getirir. Yani, bu şekilde olmak için bir istek bırakabilirsiniz daha sonra uyulması, ve gerçekleşene kadar beklemeyin.
Peki neden Bay H, doğrudan Bay X ile iletişim kurmak yerine sıraya bir mesaj bırakıyor? Çünkü ilk bölümde bahsettiğim gibi sadece Bay X ile bağlantı kurmanın yolu ona bir mesaj bırakarak telefon görüşmesi yoluyla - istisna yok.
1. setTimeout () yöntem
Diyelim ki, istediğiniz bir kod kümeniz olduğunu varsayalım. belirli bir süre sonra yürütmek. Bunu yapmak için, sadece bir işleve sar, ve ekle setTimeout () yöntem gecikme süresi ile birlikte. Sözdizimi setTimeout () Şöyleki:
setTimeout (işlev, gecikme süresi, arg…)
arg ... parametre, işlevin aldığı herhangi bir argüman anlamına gelir ve gecikme süresi milisaniye cinsinden eklenecek. Aşağıda çıktıları basit bir kod örneği görebilirsiniz “Hey” 3 saniye sonra konsolda.
setTimeout (function () console.log ('hey'), 3000); bir Zamanlar setTimeout () koşmaya başlar, çağrı yığınını engellemek yerine belirtilen gecikme süresi sona erinceye kadar zamanlayıcı tetiklenir, ve çağrı yığını bir sonraki mesaj için kademeli olarak boşaltılır (Bay X ve Bay H arasındaki yazışmalara benzer şekilde)..
Zamanlayıcı sona erdiğinde, yeni bir mesaj kuyruğa katıldı, ve olay çevrimi, çağrı yığınının önündeki tüm mesajları işledikten sonra boş olduğunda yakalar - böylece kod zaman uyumsuz olarak çalışır..
2. AJAX
AJAX (Asenkron JavaScript ve XML), aşağıdakileri kullanan bir kavramdır. XMLHttpRequest (XHR) API’sı sunucu istekleri yapmak ve cevapları ele almak.
Tarayıcılar XMLHttpRequest kullanmadan sunucu istekleri yaptığında, sayfa yenilenir ve kullanıcı arayüzünü yeniden yükler. İsteklerin ve yanıtların işlenmesi XHR API'si tarafından gerçekleştirildiğinde ve UI etkilenmeden kalır.
Yani, temelde amaç sayfa yeniden yüklemesi olmadan istekte bulunmak. Şimdi, nerede “eşzamanlı olmayan” bunda? Sadece bir an göreceğimiz XHR kodunu kullanmak, onun AJAX olduğu anlamına gelmez, çünkü XHR API’sı hem senkron hem de asenkron çalışma.
XHR varsayılan olarak ayarlandı eşzamansız çalışmak; bir işlev XHR kullanarak bir istek yaptığında, yanıt beklemeden geri döner.
XHR yapılandırılmışsa senkronize olmak, daha sonra işlev yanıt alındı ve işlendi dönmeden önce.
Kod Örneği 1
Bu örnek bir XMLHttpRequest nesne oluşturma. açık() yöntemi, istek URL’sini ve ) (Gönderme yöntem isteği gönderir.
var xhr = new XMLHttpRequest (); xhr.open ("GET", url); xhr.send (); Sonrasında yanıt verisine doğrudan erişim ) (Gönderme boşuna olacak çünkü ) (Gönderme beklemiyor istek tamamlanana kadar. Unutmayın, XMLHTTPRequest varsayılan olarak zaman uyumsuz olarak çalışacak şekilde ayarlanmış.
Kod Örneği 2
hello.txt Bu örnekteki dosya 'merhaba' metnini içeren basit bir metin dosyasıdır. tepki XHR özelliği geçersiz, çünkü 'merhaba' metnini çıkarmadı.
var xhr = new XMLHttpRequest (); xhr.open ("GET", "hello.txt"); xhr.send (); document.write (xhr.response); // boş dize XHR bir mikro rutin uygular. yanıt için kontrol etmeye devam ediyor her milisaniyede, ve ücretsiz etkinlikleri tetikler farklı devletler için bir istek geçer. Yanıt yüklendiğinde, bir load olayı XHR tarafından tetiklenir, geçerli bir cevap verebilir.
var xhr = new XMLHttpRequest (); xhr.open ("GET", "hello.txt"); xhr.send (); xhr.onload = function () document.write (this.response) // belgeye 'merhaba' yazar Load olayı içindeki cevap merhaba çıktılar, doğru metin.
İstek tamamlanana kadar diğer komut dosyalarını engellemediğinden eşzamansız yoldan gitmek tercih edilir.
Yanıtın eşzamanlı olarak işlenmesi gerekiyorsa, yanlış son argümanı olarak açık, hangi XHR API'sini işaretler söyleyerek senkron olmalı (varsayılan olarak, son argümanı açık olduğu doğru, açıkça belirtmeniz gerekmeyen).
var xhr = new XMLHttpRequest (); xhr.open ("GET", "hello.txt", yanlış); xhr.send (); document.write (xhr.response); // belgeye 'merhaba' yazar Neden bütün bunları öğren?
Neredeyse tüm yeni başlayanlar gibi asenkron kavramlarla bazı hatalar yapmak setTimeout () ve AJAX, örneğin; setTimeout () Gecikme süresinden sonra veya AJAX isteğinde bulunan bir fonksiyonun içindeki yanıtı doğrudan işleyerek kodu yürütür..
Bulmacanın nasıl uyduğunu biliyorsanız, bu tür karışıklığı önlemek. Biliyorsunuz ki gecikme süresi setTimeout () zamanı göstermez kod yürütme başladığında, ama zaman zamanlayıcı sona erdiğinde ve yeni bir mesaj kuyruğa alınır, bu sadece arama yığını bunu yapmakta özgür olduğunda işlenir..
