Підручник з JavaScript setTimeout - Як використовувати 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. До зустрічі!

Мир