Разбиране на синхронни и асинхронни в JavaScript - част 2
В първата част на този пост видяхме как концепции за синхронни и асинхронни се възприемат в JavaScript. В тази втора част г-н X се появява отново, за да ни помогне да разберем как setTimeout и AJAX APIs работа.
Странно искане
Да се върнем назад към историята на г-н Х и филма, за който искате да напуснете. Кажете, че оставяте задача на г-н Х преди разходката и му кажете, че той може само да започне да работи по тази задача пет часа след той получи съобщението ви.
Той не е щастлив за това, не забравяйте, че той не приема ново съобщение, докато не приключи с текущия, и ако вземе твоя, трябва да чака пет часа дори да започнете да изпълнявате задачата. Така че, за да не се губи време, той носи помощник, Г-н H.
Вместо да чака, той моли господин Х оставете ново съобщение за задачата в опашката след изтичане на зададените часове и преминава към следващото съобщение.
Минаха пет часа; Г-н H актуализира опашката с ново съобщение. След като свърши обработката на всички натрупани съобщения преди г-н Х, г-н Х. изпълнява заявената от вас задача. Така че, по този начин, можете да оставите искане да бъде по-късно, и не чакайте, докато се изпълни.
Но защо г-н Х оставя съобщение в опашката вместо директно да се свързва с г-н Х? Защото, както споменах в първата част, само начин да се свържете с г-н Х е като му остави съобщение чрез телефонно обаждане - няма изключения.
1. setTimeout () метод
Да предположим, че имате набор от код, който искате изпълни след определено време. За да направите това, вие просто го увийте във функция, и добавете го към a setTimeout () метод заедно със закъснението. Синтаксисът на setTimeout () е както следва:
setTimeout (функция, време на закъснение, arg…)
Най- арг ... параметър означава всеки аргумент, който функцията приема, и закъснение се добавя в милисекунди. По-долу можете да видите прост пример, който извежда “Хей” в конзолата след 3 секунди.
setTimeout (функция () console.log ('hey'), 3000); Веднъж setTimeout () започва да тече, вместо да блокира стака за обаждания докато определеното време за закъснение не приключи, a таймерът се задейства, и стека на повикването постепенно се изпразва за следващото съобщение (подобно на кореспонденцията между г-н Х и г-н Н).
Когато таймерът изтече, ново съобщение се присъединява към опашката, и цикъла на събитията го взима, когато стека на повикването е свободен след обработка на всички съобщения преди него - така кодът се изпълнява асинхронно.
2. AJAX
AJAX (Asynchronous JavaScript and XML) е концепция, която използва XMLHttpRequest (XHR) API за правя заявки за сървъри и се справят с отговорите.
Когато браузърите правят заявки за сървъри, без да използват XMLHttpRequest, Страницата се обновява и презарежда потребителския си интерфейс. Когато обработката на заявки и отговори се обработва от XHR API, и Потребителският интерфейс остава незасегнат.
Така че, основната цел е да правя заявки без презареждане на страници. Сега, къде е “асинхронни” в това? Само използването на XHR код (който ще видим за момент) не означава, че е AJAX, защото XHR API може работят както синхронно, така и асинхронно.
XHR по подразбиране е настроено на работи асинхронно; когато дадена функция прави заявка, използвайки XHR, тя връща, без да изчаква отговора.
Ако е конфигуриран XHR бъдете синхронни, след това функцията изчаква докато отговорът се получава и обработва преди да се върнете.
Код Пример 1
Този пример представя едно XMLHttpRequest създаване на обект. Най- отворено () метод, потвърждава URL адреса на заявката и изпращане () метод изпраща заявката.
var xhr = new XMLHttpRequest (); xhr.open ("GET", url); xhr.send (); Всеки директен достъп до данните за отговор след изпращане () ще бъде напразно, защото изпращане () не чака до приключване на искането. Не забравяйте, че XMLHTTPRequest е настроен да работи асинхронно по подразбиране.
Код Пример 2
Най- hello.txt Файлът в този пример е прост текстов файл, съдържащ текста 'hello'. Най- отговор свойството на XHR е невалидно, тъй като не е извело текста „здравей“.
var xhr = new XMLHttpRequest (); xhr.open ("GET", "hello.txt"); xhr.send (); document.write (xhr.response); // празен низ XHR прилага микро-рутинна процедура продължава да проверява за отговор във всяка милисекунда и задейства безплатни събития за различните държави минава молба. Когато отговорът е зареден, събитие за зареждане се задейства от XHR, което може да даде валиден отговор.
var xhr = new XMLHttpRequest (); xhr.open ("GET", "hello.txt"); xhr.send (); xhr.onload = function () document.write (this.response) // пише 'hello' в документа Отговорът в натоварващото събитие извежда "здравей", правилния текст.
Преминаването към асинхронния начин е предпочитано, тъй като не блокира други скриптове, докато заявката не приключи.
Ако отговорът трябва да бъде обработен синхронно, ще преминем фалшив като последен аргумент на отворен, който сигнализира XHR API го казвам трябва да е синхронно (по подразбиране последният аргумент на отворен е вярно, които не трябва изрично да посочите).
var xhr = new XMLHttpRequest (); xhr.open ("GET", "hello.txt", false); xhr.send (); document.write (xhr.response); // пише 'hello' в документа Защо да научите всичко това?
Почти всички начинаещи правят грешки с асинхронни понятия като setTimeout () и AJAX, например чрез допускане setTimeout () изпълнява код след времето на закъснение или чрез обработка на отговора директно във функция, която прави AJAX заявка.
Ако знаете как се вписва пъзела, можете избягвайте подобно объркване. Знаете, че времето на забавяне в setTimeout () не посочва часа когато се стартира изпълнението на кода, но времето когато таймерът изтече и ново съобщение е поставено на опашка, което ще се обработва само когато стека на повикването е свободен да го направи.
