Sinchroninio ir asinchroninio „JavaScript“ - 2 dalies supratimas
Pirmoje šio pranešimo dalyje matėme, kaip sinchroninės ir asinchroninės sąvokos yra suvokiami „JavaScript“. Šioje antrojoje dalyje X vėl pasirodo, kad padėtų mums suprasti kaip setTimeout ir AJAX API dirbti.
Nelyginis prašymas
Grįžkime atgal į X pasakojimą ir filmą, kurį norite palikti. Pasakykite, kad palikite X užduotį prieš išvykimą, ir pasakykite jam, kad jis gali pradėti dirbti tik su šia užduotimi penkias valandas po to jis gavo jūsų pranešimą.
Jis nėra patenkintas, nepamirškite, kad jis nepriima naujos žinutės tol, kol jis nebus padarytas su dabartiniu, ir jei jis imsis tavo, jis turi laukti penki valandų netgi pradėti užduotį. Taigi, kad nebūtų laiko švaistymas, jis atneša pagalbininką, H.
Užuot laukęs, jis prašo H palikite naują žinutę eilėje esančiai užduočiai praėjus tam tikroms valandoms, ir pereina prie kito pranešimo.
Praėjus penkioms valandoms; H atnaujina eilę su nauju pranešimu. Baigęs apdoroti visus sukauptus pranešimus prieš H., X atlieka jūsų prašomą užduotį. Taigi, tokiu būdu galite palikti užklausą laikomasi vėliau, ir nelaukite, kol jis bus įvykdytas.
Bet kodėl H. H palieka pranešimą eilėje, o ne tiesiogiai susisiekdamas su X? Kadangi, kaip minėjau pirmojoje dalyje, tik būdas susisiekti su X palikdamas jam žinutę telefonu - jokių išimčių.
1. setTimeout () metodas
Tarkime, kad turite kodą, kurį norite įvykdyti po tam tikro laiko. Kad tai padarytumėte, jūs tiesiog apvyniokite jį į funkciją, ir pridėti jį prie a setTimeout () metodas kartu su vėlavimo laiku. Sintaksė setTimeout () yra toks:
setTimeout (funkcija, uždelsimo laikas, arg…)
The arg… parametras reiškia bet kokį argumentą, kurį atlieka funkcija, ir delsimo laikas turi būti pridėta milisekundėmis. Žemiau galite matyti paprastą kodo pavyzdį, kurį išeina “Ei” po 3 sekundžių.
setTimeout (funkcija () console.log ('hey'), 3000); Kartą setTimeout () pradeda veikti, užblokuoti skambučių kamino tol, kol bus baigtas nurodytas delsos laikas, a įjungiamas laikmatis, ir skambučių kaminas palaipsniui išvalomas kitam pranešimui (panašiai kaip korespondencija tarp X ir H).
Pasibaigus laikmačiui, atsiranda naujas pranešimas prisijungia prie eilės, ir įvykio ciklas ją pakelia, kai skambinimo kaminas yra laisvas po visų prieš tai apdorotų pranešimų apdorojimo, todėl kodas veikia asinchroniškai.
2. AJAX
AJAX (asinchroninis „JavaScript“ ir „XML“) yra koncepcija, kurioje naudojama XMLHttpRequest (XHR) API atlikti serverio užklausas ir tvarkyti atsakymus.
Kai naršyklės pateikia serverio užklausas nenaudodami XMLHttpRequest, puslapis atnaujinamas ir įkelia savo vartotojo sąsają. Kai užklausų ir atsakymų apdorojimą tvarko XHR API, ir UI lieka nepakeista.
Taigi, iš esmės tikslas yra pateikti užklausas be puslapio perkrovimo. Dabar, kur yra “asinchroninis” šiame? Tiesiog naudojant XHR kodą (kurį matysime vienu metu), tai nereiškia, kad tai AJAX, nes XHR API gali dirbti sinchroniškai ir asinchroniškai.
XHR pagal nutylėjimą yra nustatytas dirbti asinchroniškai; kai funkcija pateikia užklausą, naudodama XHR grįžta laukiant atsakymo.
Jei XHR yra sukonfigūruotas būti sinchroniškai, tada funkcija laukia iki atsakymas gaunamas ir apdorojamas prieš sugrįždami.
1 pavyzdys
Šis pavyzdys pateikia XMLHttpRequest objekto kūrimas. The atviras() metodas, patvirtina užklausos URL ir siųsti () metodas siunčia užklausą.
var xhr = naujas XMLHttpRequest (); xhr.open („GET“, URL); xhr.send ();
Bet kokia tiesioginė prieiga prie atsakymo duomenų po siųsti () bus veltui, nes siųsti () nelaukia kol užklausa bus baigta. Atminkite, kad XMLHTTPRequest nustatoma, kad pagal nutylėjimą veikia asinchroniškai.
Kodo pavyzdys 2
The hello.txt šiame pavyzdyje esantis failas yra paprastas tekstinis failas su tekstu „hello“. The atsakas XHR nuosavybė negalioja, nes jis nepateikė teksto „hello“.
var xhr = naujas XMLHttpRequest (); xhr.open („GET“, „hello.txt“); xhr.send (); document.write (xhr.response); // tuščia eilutė
XHR įgyvendina mikroprocedūrą nuolat tikrina atsakymą kiekvieną milisekundę, ir sukelia nemokamus įvykius skirtingoms valstybėms pateikiamas prašymas. Kai atsakymas įkeliamas, apkrovos įvykį sukelia XHR, kurie gali pateikti teisingą atsakymą.
var xhr = naujas XMLHttpRequest (); xhr.open („GET“, „hello.txt“); xhr.send (); xhr.onload = function () document.write (this.response) // įrašo dokumentą „hello“
Atsakymas apkrovos įvykio viduje siunčia „hello“, teisingą tekstą.
Pageidautina eiti asinchroniniu būdu, nes jis neslopina kitų scenarijų, kol užklausa nebus baigta.
Jei atsakymas turi būti apdorotas sinchroniškai, mes perduodame klaidinga kaip paskutinį argumentą atviras, kuris žymi XHR API sakydamas turi būti sinchroninis (pagal nutylėjimą paskutinis argumentas atviras yra tiesa, kurių nereikia aiškiai nurodyti.
var xhr = naujas XMLHttpRequest (); xhr.open („GET“, „hello.txt“, false); xhr.send (); document.write (xhr.response); // rašo „hello“ dokumentui
Kodėl visa tai išmokti?
Beveik visi pradedantiesieji daro kai kurias klaidas su asinchroninėmis sąvokomis, tokiomis kaip setTimeout () ir AJAX, pavyzdžiui, darant prielaidą, kad setTimeout () įvykdo kodą po uždelsimo laiko arba apdorodamas atsaką tiesiai į funkciją, kuri pateikia AJAX užklausą.
Jei žinote, kaip tinka dėlionės, galite išvengti tokios painiavos. Jūs žinote, kad vėlavimo laikas setTimeout () nenurodo laiko kai prasideda kodo vykdymas, bet laikas pasibaigus laikmačiui ir naujas pranešimas yra eilėje, kuri bus apdorojama tik tada, kai skambučių kaminai bus leista laisvai tai padaryti.
