JavaScript setTimeout Tutorial - Как да използвам JS еквивалента на сън, изчакване, забавяне и пауза

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

Една от тези функции са Promises, които са може би най-широко използваната функция в JavaScript след пускането на ES5.

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

Спойлер: JavaScript всъщност никога не „прави паузи“.

TL; DR

Ето кода за копиране на паста, който върши работата:

/** * * @param duration Enter duration in seconds */ function sleep(duration) { return new Promise(resolve => { setTimeout(() => { resolve() }, duration * 1000) }) }

Но какво всъщност се случва тук?

setTimeout и фалшиви обещания

Нека да видим бърз пример, използвайки горния фрагмент (ще обсъдим какво се случва в него по-късно):

async function performBatchActions() { // perform an API call await performAPIRequest() // sleep for 5 seconds await sleep(5) // perform an API call again await performAPIRequest() }

Тази функция performBatchActions, когато бъде извикана, просто изпълнява performAPIRequestфункцията, изчаква около 5 секунди и след това отново извиква същата функция. Обърнете внимание как написах около 5 секунди , а не 5 секунди.

Силна бележка: горният код не гарантира перфектен сън. Това означава, че ако посочите продължителността да бъде, да речем, 1 секунда, JavaScript не гарантира , че ще започне да изпълнява кода след съня точно след 1 секунда.

Защо не? може да попитате. За съжаление, това е така, защото таймерите работят в JavaScript и като цяло, цикли на събития. JavaScript обаче абсолютно гарантира, че парчето код след сън никога няма да се изпълни преди определеното време.

Така че всъщност нямаме пълна неопределена ситуация, а само частична. И в повечето случаи това е само в рамките на няколко милисекунди.

JavaScript е с една нишка

Една нишка означава, че процесът на JavaScript изобщо не може да излезе от пътя. Той трябва да прави всички неща - от слушатели на събития, до HTTP обратни извиквания, в една и съща основна нишка. И когато едно нещо се изпълнява, друго не може да се изпълни.

Помислете за уеб страница, в която имате няколко бутона и стартирате горния код, за да симулирате сън за, да кажем, 10 секунди. Какво очаквате да се случи?

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

И така, как всъщност JavaScript поставя на пауза една нишка, без никога да я прави на пауза?

Запознайте се с цикъла на събитията

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

Цикъл на събития разделя кода ви в синхронни и определени събития - като таймери и HTTP заявки. По-точно казано, има две опашки - опашка от задачи и опашка за микрозадачи.

Всеки път, когато стартирате JS и има асинхронно нещо (като събитие с щракване на мишката или обещание), JavaScript го хвърля в опашката на задачата (или опашката за микрозадачи) и продължава да се изпълнява. Когато завърши "единичен отметка", той проверява дали опашките на задачите и опашката за микрозадачи имат някаква работа за това. Ако отговорът е да, тогава той ще изпълни обратното повикване / ще извърши действие.

Наистина бих препоръчал на всеки, който се интересува от подробната работа на циклите на събития, да гледа това видео:

Заключение

Вие дойдохте тук за проста инструкция за сън в JavaScript и в крайна сметка научихте за едно от основните неща в JavaScript - контури за събития! Удивително, нали?

Е, ако статията ви е харесала, разгледайте codedamn - платформа, която изградих за разработчици и учащи като вас. Също така, нека се свържем в социалните медии - Twitter и Instagram. Ще се видим скоро!

Мир