Comprensione sincrona e asincrona in JavaScript - Parte 2
Nella prima parte di questo post, abbiamo visto come il concetti di sincrono e asincrono sono percepiti in JavaScript. In questa seconda parte, il signor X appare di nuovo per aiutarci a capire come setTimeout e AJAX API lavoro.
Una richiesta strana
Torniamo indietro alla storia di Mr X e del film che vuoi lasciare. Dite che lasciate un incarico a Mr X prima della gita e ditegli che può solo iniziare a lavorare su questo compito cinque ore dopo ha ricevuto il tuo messaggio.
Non ne è felice, ricorda, non fa un nuovo messaggio finché non ha finito con quello attuale, e se prende il tuo, lui deve aspettare cinque ore anche per iniziare l'attività. Quindi, per non perdere tempo, lui porta un aiutante, Mr H.
Invece di aspettare, chiede al signor H. lasciare un nuovo messaggio per l'attività in coda dopo che le ore prestabilite erano passate e passa al messaggio successivo.
Cinque ore passate; Mr H aggiorna la coda con un nuovo messaggio. Dopo che ha finito di elaborare tutti i messaggi accumulati prima di Mr H's, Mr X svolge il tuo compito richiesto. Quindi, in questo modo, puoi lasciare una richiesta rispettato in un secondo momento, e non aspettare fino a quando non si è avverato.
Ma perché il signor H lascia un messaggio in coda invece di contattare direttamente il signor X? Perché come ho menzionato nella prima parte, il solo modo di contattare il signor X è lasciando un messaggio a lui tramite telefonata - senza eccezioni.
1. Il setTimeout () metodo
Supponiamo che tu abbia un set di codice che vuoi eseguire dopo un certo tempo. Per farlo, tu semplicemente avvolgilo in una funzione, e aggiungilo a setTimeout () metodo insieme al tempo di ritardo. La sintassi di setTimeout () è come segue:
setTimeout (funzione, delay-time, arg ...)
Il arg ... parametro sta per qualsiasi argomento la funzione accetta, e ritardo deve essere aggiunto in millisecondi. Qui sotto puoi vedere un semplice esempio di codice, che emette “Hey” nella console dopo 3 secondi.
setTimeout (function () console.log ('hey'), 3000); Una volta setTimeout () inizia a correre, invece di bloccare lo stack di chiamate fino al termine del ritardo indicato, a il timer è attivato, e lo stack di chiamate viene gradualmente svuotato per il messaggio successivo (analogamente alla corrispondenza tra Mr X e Mr H).
Alla scadenza del timer, un nuovo messaggio si unisce alla coda, e il ciclo di eventi lo preleva quando lo stack di chiamate è libero dopo aver elaborato tutti i messaggi prima di esso - quindi il codice viene eseguito in modo asincrono.
2. AJAX
AJAX (Asynchronous JavaScript and XML) è un concetto che utilizza il XMLHttpRequest (XHR) API a fare richieste al server e gestire le risposte.
Quando i browser eseguono richieste server senza utilizzare XMLHttpRequest, il file pagina si aggiorna e ricarica la sua interfaccia utente. Quando l'elaborazione delle richieste e delle risposte viene gestita dall'API XHR, e L'interfaccia utente rimane inalterata.
Quindi, fondamentalmente l'obiettivo è quello di effettuare richieste senza ricaricare la pagina. Ora, dov'è il “asincrono” in questo? L'uso del codice XHR (che vedremo tra poco) non significa che sia AJAX, perché l'API XHR può lavorare in modo sincrono e asincrono.
XHR per impostazione predefinita è impostato per lavorare in modo asincrono; quando una funzione effettua una richiesta usando XHR, ritorna senza attendere la risposta.
Se XHR è configurato per essere sincrono, quindi la funzione attende fino a la risposta è ricevuta ed elaborata prima di tornare.
Esempio di codice 1
Questo esempio presenta un XMLHttpRequest creazione di oggetti. Il Aperto() metodo, convalida l'URL della richiesta e il inviare() metodo invia la richiesta.
var xhr = new XMLHttpRequest (); xhr.open ("GET", url); xhr.send (); Qualsiasi accesso diretto ai dati di risposta dopo inviare() sarà invano, perché inviare() non aspetta fino a quando la richiesta è completa. Ricordare che XMLHTTPRequest è impostato per funzionare in modo asincrono per impostazione predefinita.
Esempio di codice 2
Il ciao.txt il file in questo esempio è un semplice file di testo contenente il testo "ciao". Il risposta la proprietà di XHR non è valida, poiché non ha prodotto il testo 'ciao'.
var xhr = new XMLHttpRequest (); xhr.open ("GET", "hello.txt"); xhr.send (); document.write (xhr.response); // stringa vuota XHR implementa una micro-routine continua a controllare la risposta in ogni millisecondo, e innesca eventi gratuiti per i diversi stati viene inoltrata una richiesta. Quando viene caricata la risposta, un evento di caricamento viene attivato da XHR, che può fornire una risposta valida.
var xhr = new XMLHttpRequest (); xhr.open ("GET", "hello.txt"); xhr.send (); xhr.onload = function () document.write (this.response) // scrive 'hello' nel documento La risposta all'interno dell'evento di caricamento uscite 'ciao', il testo corretto.
È preferibile passare alla modalità asincrona, in quanto non blocca altri script fino al completamento della richiesta.
Se la risposta deve essere elaborata in modo sincrono, passiamo falso come l'ultimo argomento di Aperto, quale contrassegna l'API XHR dicendo deve essere sincrono (Di default l'ultimo argomento di Aperto è vero, che non è necessario specificare esplicitamente).
var xhr = new XMLHttpRequest (); xhr.open ("GET", "ciao.txt", falso); xhr.send (); document.write (xhr.response); // scrive 'ciao' per documentare Perché imparare tutto questo?
Quasi tutti i principianti commettono alcuni errori con concetti asincroni come setTimeout () e AJAX, ad esempio assumendo setTimeout () esegue il codice dopo il tempo di ritardo o elaborando la risposta direttamente all'interno di una funzione che effettua una richiesta AJAX.
Se sai come si adatta il puzzle, puoi farlo evitare tale confusione. Sai che il tempo di ritardo in setTimeout () non indica il tempo quando inizia l'esecuzione del codice, ma il tempo quando il timer scade e un nuovo messaggio viene accodato, che verrà elaborato solo quando lo stack di chiamate è libero di farlo.
