Разбиране на синхронния и асинхронния JavaScript - част 1

синхронен и асинхронни са объркващи понятия в JavaScript, особено за начинаещи. Две или повече неща са синхронен когато те се случват по едно и също време (в синхрон) и асинхронни, когато не го правят (не е в синхрон).

Въпреки че тези определения са лесни за възприемане, всъщност е по-сложно, отколкото изглежда. Трябва да вземем под внимание какво точно са синхронизирани, и какво не.

Вероятно бихте нарекли a нормален функция в JavaScript синхронно, нали? И ако е нещо подобно setTimeout () или AJAX, с който работите, ще го наричате асинхронен, да? Ами ако ти кажа това и двете по някакъв начин са асинхронни?

За да обясните защо, трябва да се обърнем към г-н Х за помощ.

Сценарий 1 - Г-н Х се опитва да синхронизира

Ето настройката:

1. Г-н Х е човек, който може да отговори на трудни въпроси и да изпълни всяка поискана задача.
2. Единственият начин да се свържете с него е чрез телефонно обаждане.
3. Какъвто и въпрос да имате или задача, за да помолите г-н Х да го изпълни; ти го наричаш.
4. Г-н Х ви дава отговора или завършва задачата веднага, и ви уведомява готово е.
5. Вие оставяте приемника чувствате съдържание и излиза за филм.

Това, което току-що извършихте беше синхронна (назад и напред) комуникация с г-н Х. Той слушаше, докато му задавахте въпроса си, и слушахте, когато отговаряше.

Сценарий 2 - Г-н Х не е доволен от синхронността

Тъй като г-н Х е толкова ефективен, той започва да получава много повече обаждания. И така, какво се случва, когато го наричаш той вече е зает говоря с някой друг? Няма да можете да му зададете въпроса си - не докато не е свободен да приеме обаждането ви. Всичко, което ще чуете, е сигнал заето.

Така че какво може да направи г-н Х, за да се бори с това?

Вместо директно приемане на обаждания:

1. Г-н Х наема нов човек, г-н М и му дава телефонен секретар за обаждащите се да оставяте съобщения.
2. Работата на г-н М е да предаване на съобщение от телефонния секретар до г-н Х, след като разбере, че г-н Х е завършил напълно обработката на всички предишни съобщения и вече е готов свободен да вземе нов.
3. Така че сега, когато му се обаждате, вместо да получавате зает тон, можете да оставите съобщение за г-н X, след това Чакай го да ти се обади (все още няма филмово време).
4. След като г-н Х приключи с всички изпратени по пощата съобщения, които е получил преди вас, той ще разгледа въпроса ви и ще ви се обадя да ви дам отговор.

Сега тук стои въпросът: действията досега синхронно или асинхронно?

Това е смесено. Когато напуснахте съобщението си, Г-н Х не го слушаше, така че четвъртата комуникация беше асинхронна.

Но когато отговори, ти беше там и слушаше, който прави връзката за връщане синхронна.

Надявам се, че досега сте придобили по-добро разбиране за това как се възприема синхронността по отношение на комуникацията. Време е да въведете JavaScript.

JavaScript - Асинхронен език за програмиране

Когато някой етикетира JavaScript асинхронно, това, което те имат предвид по принцип, е как можете остави съобщение за него и Вашето обаждане не е блокирано със зает тон.

Функционалните повиквания са никога не насочвайте в JavaScript, те са буквално направени чрез съобщения.

JavaScript използва a опашка за съобщения където се провеждат входящи съобщения (или събития). Една събитие цикъл (диспечер на съобщения) последователно изпраща тези съобщения до стека за обаждания където съответните функции на съобщенията са подредени като рамки (функция аргументи и променливи) за изпълнение.

Стекът за повиквания съдържа рамката на извикваната първоначална функция и всички други рамки за извикани функции чрез вложени повиквания на всичко отгоре .

Когато съобщението се присъедини към опашката, то изчаква докато стека на повикването е празни от всички кадри от предишното съобщение, и когато е, цикълът на събитията изчиства предишното съобщение, и добавя съответните рамки на текущото съобщение към стека за повиквания.

Съобщението изчаква отново, докато стакът на повикването стане празни рамки (изпълненията на всички подредени функции са над), след това се премахва.

Помислете за следния код:

 функция foo ()  функционална лента () foo ();  функция baz () bar ();  baz (); 

Функцията, която се изпълнява, е Баз () (в последния ред на кодовия фрагмент), за което към опашката се добавя съобщение, и когато цикълът събитие го вдигне, стека на повикването започва да подрежда рамки за Баз (), бар (), и Foo () в съответните изпълнителни пунктове.

След като изпълнението на функциите е завършено един по един, техните рамки са премахнати от стека на повикванията, докато съобщението е все още чака в опашката, до Баз () изскача от стека.

Не забравяйте, че функцията повиквания са никога не насочвайте в JavaScript, те са готови чрез съобщения. Така че, когато чуете някой да казва, че самият JavaScript е асинхронен език за програмиране, приемете, че те говорят за неговия вграден “телефонен секретар”, и как сте свободни да оставяте съобщения.

Но какво да кажем за специфичните асинхронни методи?

Досега не съм докосвал API, като например setTimeout () и AJAX, това са тези, които са специфично наричан асинхронен. Защо така?

Важно е да разберете какво точно е синхронно или асинхронно. JavaScript, с помощта на събития и цикъл на събития, може да практикува асинхронна обработка на съобщения, но това не означава всичко в JavaScript е асинхронен.

Не забравяйте, че ви казах, че съобщението не е напуснало, докато не се появи стакът празни рамки, точно както не сте тръгнали за филм, докато не получите отговор - това е синхронно, Вие чакате докато задачата не приключи, и ще получите отговора.

Очакване не е идеален във всички сценарии. Какво ще стане, ако след като оставите съобщение, вместо да чакате, можете да излезете за филма? Какво ще стане, ако дадена функция може да се оттегли (изпразване на стека на повикванията), а съобщението му може да бъде премахнато дори преди задачата на функцията да е завършена? Ами ако имате код, изпълнен асинхронно?

Това е мястото, където API, като например setTimeout () и AJAX влязат в картината, и това, което правят, е… да се задържи, не мога да обясня това, без да се връщам към г-н X, което ще видим във втората част на тази статия. Останете на линия.