Förstå synkron och asynkron i JavaScript - Del 2
I den första delen av detta inlägg såg vi hur begrepp synkron och asynkron uppfattas i JavaScript. I den här andra delen återkommer herr X igen för att hjälpa oss att förstå hur setTimeout och AJAX API arbete.
En udda begäran
Låt oss spola tillbaka till berättelsen om Mr X och filmen du vill lämna. Säg att du lämnar en uppgift för Mr X före utflykten och berätta för honom att han bara kan börja arbeta med den här uppgiften fem timmar efter Han fick ditt meddelande.
Han är inte glad över det, kom ihåg att han inte tar ett nytt meddelande tills han är klar med den nuvarande, och om han tar din, måste vänta på fem timmar att till och med börja på uppgiften. Så, för att inte vara slösad med tiden, han tar in en hjälpreda, Herr h.
I stället för att vänta frågar han H till lämna ett nytt meddelande för uppgiften i kön efter att de angivna timmarna hade passerat och flyttas vidare till nästa meddelande.
Fem timmar förbi Herr h uppdaterar kön med ett nytt meddelande. Efter att han har klarat att bearbeta alla upplupna meddelanden före Mr H, Mr X utför din önskade uppgift. Så, så kan du lämna en förfrågan att vara följde vid en senare tidpunkt, och inte vänta tills det är uppfyllt.
Men varför lämnar H Hör ett meddelande i köen istället för att kontakta X direkt? För som jag nämnde i första delen, den endast sätt att kontakta herr x är genom att lämna ett meddelande till honom via telefonsamtal - inga undantag.
1. Den setTimeout () metod
Antag att du har en uppsättning kod som du vill exekvera efter en viss tid. För att göra det, du bara vikla den i en funktion, och lägg till den till en setTimeout () metod tillsammans med fördröjningstiden. Syntaxen av setTimeout () enligt följande:
setTimeout (funktion, fördröjningstid, arg ...)
De arg ... parameter står för eventuella argument som funktionen tar, och försening ska läggas till i millisekunder. Nedan kan du se ett enkelt kodexempel, som utgångar “Hallå” i konsolen efter 3 sekunder.
setTimeout (funktion () console.log ('hey'), 3000); En gång setTimeout () börjar springa, istället för att blockera samtalstacken tills den angivna fördröjningstiden är över, a timer utlöses, och samtalstacken töms gradvis för nästa meddelande (på samma sätt som korrespondensen mellan herr X och herr H).
När timern löper ut, ett nytt meddelande ansluter sig till köen, och händelsesslangen tar upp den när samtalstacken är ledig efter att alla meddelanden har bearbetats före den - så körs koden asynkront.
2. AJAX
AJAX (asynkron JavaScript och XML) är ett koncept som använder XMLHttpRequest (XHR) API till göra servernsförfrågningar och hantera svaren.
När webbläsare gör servernsförfrågningar utan att använda XMLHttpRequest, ska sidan uppdateras och laddar om dess användargränssnitt. När behandlingen av förfrågningar och svar hanteras av XHR API, och Gränssnittet är opåverkat.
Så i princip är målet att göra förfrågningar utan sidladdning. Nu är var “asynkron” i denna? Att bara använda XHR-kod (som vi ser på ett ögonblick) betyder inte att det är AJAX, eftersom XHR API kan arbeta på både synkrona och asynkrona sätt.
XHR som standard är satt till arbeta asynkront; när en funktion gör en förfrågan med hjälp av XHR, den returnerar utan att vänta på svaret.
Om XHR är konfigurerat till vara synkron, då väntar funktionen tills svaret tas emot och behandlas innan han återvänder.
Kod Exempel 1
Detta exempel presenterar en XMLHttpRequest objekt skapande. De öppna() metod, validerar begäran URL, och skicka() Metod skickar begäran.
var xhr = ny XMLHttpRequest (); xhr.open ("GET", url); xhr.send (); Eventuell direkt tillgång till svardata efter skicka() kommer att vara förgäves, för skicka() väntar inte tills begäran är klar. Kom ihåg att XMLHTTPRequest är inställd att fungera asynkront som standard.
Kod Exempel 2
De hello.txt filen i det här exemplet är en enkel textfil som innehåller texten "hej". De svar egenskapen för XHR är ogiltig, eftersom den inte skickade texten "hej".
var xhr = ny XMLHttpRequest (); xhr.open ("GET", "hej.txt"); xhr.send (); document.write (xhr.response); // tom sträng XHR genomför en mikro-rutin som håller kontrollen av svaret i varje millisekund, och utlöser gratis händelser För de olika staterna går en förfrågan igenom. När svaret är laddat, en lasthändelse utlöses av XHR, vilket kan ge ett giltigt svar.
var xhr = ny XMLHttpRequest (); xhr.open ("GET", "hej.txt"); xhr.send (); xhr.onload = function () document.write (this.response) // skriver "hej" till dokumentet Svaret inuti lasthändelsen utgångar "hej", den rätta texten.
Går det asynkrona sättet är att föredra, eftersom det inte blockerar andra skript tills begäran är klar.
Om svaret måste behandlas synkront passerar vi falsk som det sista argumentet för öppna, som flaggor XHR API säger det måste vara synkron (som standard det sista argumentet för öppna är Sann, som du inte behöver uttryckligen specificera).
var xhr = ny XMLHttpRequest (); xhr.open ("GET", "Hello.txt", false); xhr.send (); document.write (xhr.response); // skriver "hej" för att dokumentera Varför lära sig allt detta?
Nästan alla nybörjare gör några misstag med asynkrona koncept som setTimeout () och AJAX, till exempel genom att anta setTimeout () exekverar kod efter fördröjningstiden eller genom att behandla svar direkt inuti en funktion som gör en AJAX-förfrågan.
Om du vet hur pusset passar kan du undvik sådan förvirring. Du vet att fördröjningstiden i setTimeout () Anger inte tiden när kodkörningen startar, men tiden när timern löper ut och ett nytt meddelande är i kö, vilket bara kommer att behandlas när samtalstacken är ledig att göra det.
