Sinhronā un asinhronā izpratne JavaScript - 2.daļā
Šī ziņojuma pirmajā daļā mēs redzējām, kā sinhronas un asinhronas koncepcijas tiek uztverti JavaScript. Šajā otrajā daļā X atkal parādās, lai palīdzētu mums saprast kā setTimeout un AJAX API darbu.
Nepāra pieprasījums
Atgriezīsimies atpakaļ uz stāstu par X un filmu, kuru vēlaties atstāt. Saka, ka atstājiet X kungam uzdevumu pirms brauciena, un pastāstiet viņam, ka viņš var sākt darbu tikai ar šo uzdevumu piecas stundas pēc tam viņš saņēma jūsu ziņojumu.
Viņš par to nav apmierināts, atcerieties, ka viņš nesaņem jaunu ziņojumu, kamēr viņš nav paveicis pašreizējo, un, ja viņš tevi uzņem, viņš jāgaida pieci stundas pat sākt darbu. Tātad, lai nebūtu laika izšķērdētājs, viņš sniedz palīdzību, H kungs.
Tā vietā, lai gaidītu, viņš lūdz H atstājiet jaunu ziņu rindā esošajam uzdevumam pēc dotajām stundām, un pāriet uz nākamo ziņojumu.
Piecas stundas iepriekš; H kungs atjaunina rindu ar jaunu ziņu. Pēc tam, kad viņš ir apstrādājis visus uzkrātos ziņojumus pirms H kunga, X kungs veic jūsu pieprasīto uzdevumu. Tādā veidā jūs varat atstāt pieprasījumu vēlāk, un negaidiet, kamēr tas nav izpildīts.
Bet kāpēc H kungs atstāj rindu rindā, nevis tieši sazinās ar X kungu? Jo, kā es minēju pirmajā daļā, tikai veids, kā sazināties ar X kungu atstājot ziņu viņam pa telefonu - bez izņēmumiem.
1. setTimeout () metodi
Pieņemsim, ka jums ir vajadzīgais kods izpildīt pēc noteikta laika. Lai to izdarītu, jūs vienkārši ietiniet to funkcijā, un pievienot to a setTimeout () metodi kopā ar aizkaves laiku. Sintakse setTimeout () ir šāds:
setTimeout (funkcija, kavēšanās laiks, arg…)
The arg… parametrs apzīmē jebkuru argumentu, ko funkcija veic, un kavēšanās laiks ir jāpievieno milisekundēs. Zemāk jūs varat redzēt vienkāršu koda piemēru, kas tiek izvadīts “hey” konsolē pēc 3 sekundēm.
setTimeout (funkcija () console.log ('hey'), 3000); Reiz setTimeout () sāk darboties, tā vietā, lai bloķētu zvanu kaudzi līdz norādītais aizkaves laiks ir beidzies, a tiek aktivizēts taimeris, un nākamajai ziņai pakāpeniski iztukšo zvanu kaudzīti (līdzīgi kā korespondence starp X un H kungu).
Kad taimeris beidzas, tiek parādīts jauns ziņojums pievienojas rindai, un notikuma cilpa to atver, kad zvanu kaudze ir brīva pēc visu to ziņojumu apstrādes, tādējādi kods darbojas asinhroni.
2. AJAX
AJAX (Asynchronous JavaScript un XML) ir jēdziens, kas izmanto XMLHttpRequest (XHR) API uz veikt servera pieprasījumus un apstrādāt atbildes.
Kad pārlūkprogrammas pieprasa servera pieprasījumus, neizmantojot XMLHttpRequest, lapa atsvaidzina un ielādē savu lietotāja interfeisu. Kad pieprasījumu un atbilžu apstrāde tiek veikta ar XHR API un UI paliek nemainīga.
Tātad, būtībā mērķis ir pieprasīt bez lapas atkārtotas ielādes. Tagad, kur ir “asinhrona” šajā? Tikai izmantojot XHR kodu (ko mēs redzēsim brīdi), tas nenozīmē, ka tas ir AJAX, jo XHR API var strādāt gan sinhronā, gan asinhronā veidā.
XHR pēc noklusējuma ir iestatīts uz strādā asinhroni; ja funkcija veic pieprasījumu, izmantojot XHR, tā atgriežas, negaidot atbildi.
Ja XHR ir konfigurēts būt sinhroniem, tad funkcija gaida līdz atbilde tiek saņemta un apstrādāta pirms atgriešanās.
Kods 1. piemērs
Šis piemērs piedāvā XMLHttpRequest objekta izveide. The atvērts () metodi, apstiprina pieprasījuma URL un sūtīt () metode nosūta pieprasījumu.
var xhr = jauns XMLHttpRequest (); xhr.open ("GET", URL); xhr.send (); Jebkura tieša piekļuve atbildes datiem pēc sūtīt () būs veltīgi, jo sūtīt () nav jāgaida līdz pieprasījums ir pabeigts. Atcerieties, ka XMLHTTPRequest ir iestatīts darboties asinhroni pēc noklusējuma.
Kods 2. piemērs
The hello.txt šajā piemērā ir vienkāršs teksta fails, kurā ir teksts “hello”. The atbildi XHR īpašums nav derīgs, jo tas neizdevās ievadīt tekstu „hello”.
var xhr = jauns XMLHttpRequest (); xhr.open ("GET", "hello.txt"); xhr.send (); document.write (xhr.response); // tukša virkne XHR to īsteno turpina pārbaudīt atbildi katrā milisekundē, un izraisa bezmaksas notikumus dažādām valstīm pieprasījums ir izpildīts. Kad atbilde ir ielādēta, slodzes notikumu aktivizē XHR, kas var sniegt pareizu atbildi.
var xhr = jauns XMLHttpRequest (); xhr.open ("GET", "hello.txt"); xhr.send (); xhr.onload = function () document.write (this.response) // dokumentam raksta “hello” Atbilde ielādes notikuma ietvaros izvada “hello”, pareizo tekstu.
Ieteicams iet asinhronā veidā, jo tas neizslēdz citus skriptus, kamēr pieprasījums nav pabeigts.
Ja atbilde ir jāapstrādā sinhroni, mēs nododam nepatiesa kā pēdējo argumentu atvērts, kas atzīmē XHR API sakot to jābūt sinhronai (pēc noklusējuma pēdējais arguments atvērts ir taisnība, kas jums nav skaidri jānorāda).
var xhr = jauns XMLHttpRequest (); xhr.open ("GET", "hello.txt", false); xhr.send (); document.write (xhr.response); // raksta “hello”, lai dokumentētu Kāpēc to visu iemācīties?
Gandrīz visi iesācēji kļūdās ar asinhroniem jēdzieniem, piemēram, setTimeout () un AJAX, piemēram, pieņemot setTimeout () izpilda kodu pēc aizkaves laika vai apstrādājot atbildi tieši tajā funkcijā, kas pieprasa AJAX.
Ja jūs zināt, kā puzzle atbilst, varat izvairīties no šādas neskaidrības. Jūs zināt, ka kavēšanās laiks setTimeout () nenorāda laiku kad sākas koda izpilde, bet laiks kad taimeris beidzas un jaunā ziņa ir rindā, kas tiks apstrādāta tikai tad, kad zvanu kaudze to var brīvi darīt.
