Як використовувати setTimeout() у JavaScript. Пояснення за 5 хвилин або менше

Автор

Для розробника веб-сайтів, швидкість відгуку та інтерактивність вашого веб-застосунку є визначальними для взаємодії з користувачем. Щоб покращити цей досвід, необхідно додати динамічні елементи та контролювати послідовність виконання коду.

Метод setTimeout() – це ефективний інструмент, який дозволяє запланувати виконання коду, створювати анімації, таймери та управляти асинхронними операціями у вашому застосунку.

Тому розуміння синтаксису setTimeout(), його практичного застосування та можливостей є важливим для вашого наступного проєкту. У цій статті ми розглянемо ці аспекти, щоб ви могли максимально ефективно використовувати метод setTimeout().

Функція JavaScript setTimeout

setTimeout() є глобальним методом, доступним через об’єкт window, що дозволяє відкласти виконання функції або коду на певний проміжок часу. Наприклад, якщо потрібно запустити функцію через чотири секунди, setTimeout() є ідеальним рішенням.

Коли використовується setTimeout(), встановлюється таймер, який веде зворотний відлік до заданого часу, а потім виконує функцію або код, переданий в метод.

Глобальний метод означає, що setTimeout() є частиною глобального об’єкта і доступний всюди без необхідності імпортування. Глобальний об’єкт, наданий DOM в браузері, представлений у вигляді властивості window.

Отже, можна використовувати як window.setTimeout(), так і просто setTimeout(), оскільки другий варіант імпліцитно посилається на глобальний об’єкт window. Обидва варіанти є еквівалентними.

Загальний синтаксис setTimeout() виглядає так:

setTimeout(function, delay)
  • function – це функція, яка буде виконана після заданої затримки.
  • delay – це час у мілісекундах, через який буде виконано передану функцію. Одна секунда дорівнює 1000 мілісекундам.

Під час використання setTimeout(), значення delay має бути числовим, щоб уникнути помилок. Аргумент delay є необов’язковим. Якщо його не вказано, значення за замовчуванням дорівнює 0, і передана функція виконується негайно.

setTimeout() повертає унікальний ідентифікатор, відомий як timeoutID, який є позитивним цілим числом, що унікально ідентифікує таймер, створений при виклику методу setTimeout().

Також важливо пам’ятати, що setTimeout() є асинхронним. Його таймер не блокує виконання інших функцій у стеку викликів.

Як використовувати setTimeout()

Розглянемо приклади використання методу setTimeout():

// setTimeout() з оголошенням функції
setTimeout(function () {
  console.log("Привіт, Світе, після 3 секунд");
}, 3000);

// setTimeout() зі стрілковою функцією
setTimeout(() => {
  console.log("Привіт, Світе, в стрілковій функції - 1 секунда");
}, 1000);

Результат:

Привіт, Світе, в стрілковій функції - 1 секунда
Привіт, Світе, після 3 секунд

У наведеному вище виводі другий setTimeout() виводиться першим, оскільки має меншу затримку в 1 секунду, порівняно з першим, який має затримку в 3 секунди. Як зазначалося раніше, setTimeout() є асинхронним. Коли викликається перший setTimeout() із затримкою 3 секунди, запускається 3-секундний таймер, але він не зупиняє виконання іншого коду в програмі.

Коли метод відлічує від 3, решта коду у стеку викликів виконується. У цьому прикладі наступним фрагментом коду є другий setTimeout() із затримкою в 1 секунду. Оскільки він має меншу затримку, його код виконується раніше першого setTimeout().

Використовуючи setTimeout(), не потрібно писати функцію безпосередньо всередині методу setTimeout().

// Оголошення функції
function greet() {
  console.log("Привіт!");
}

// Збереження функції у змінній - функціональний вираз
const speak = function () {
  console.log("Як справи?");
};

// Використання стрілкової функції
const signOff = () => {
  console.log("З повагою: techukraine.net:)");
};

// Передача посилання на функцію в setTimeout()
setTimeout(greet, 1000);
setTimeout(speak, 2000);
setTimeout(signOff, 3000);

Вивід:

Привіт!
Як справи?
З повагою: techukraine.net:)

Коли ми визначаємо метод в іншому місці, а потім передаємо його в setTimeout(), ми передаємо посилання на функцію, яку потрібно виконати через заданий час.

setTimeout() з додатковими параметрами

setTimeout() має альтернативний синтаксис, який дозволяє передавати додаткові параметри в метод setTimeout(). Ці параметри будуть використані функцією, яку ви запускаєте після затримки.

Синтаксис виглядає так:

setTimeout(functionRef, delay, param1, param2, /* …, */ paramN)

Ви можете передати будь-яку кількість додаткових параметрів залежно від кількості аргументів, необхідних для функції, на яку ви посилаєтеся.

Розглянемо наступну функцію:

function greet(name, message) {
  console.log(`Привіт, ${name}, ${message}`);
}

Якщо ви хочете виконати наведену вище функцію через певний час за допомогою setTimeout(), це можна зробити наступним чином:

// setTimeOut() з додатковими параметрами
function greet (name, message) {
  console.log(`Привіт, ${name}, ${message}`);
}

setTimeout(greet, 2000, "Іван", "успішного кодування!");

Вихід:

Привіт, Іван, успішного кодування!

Пам’ятайте, якщо ми визначаємо функцію в іншому місці, а потім передаємо її в setTimeout(), ми передаємо лише посилання на функцію. У наведеному вище прикладі ми передаємо посилання greet, а не greet(), який викликає функцію. Ми хочемо, щоб setTimeout() викликав функцію за її посиланням.

Ось чому ми не можемо безпосередньо передати додаткові параметри, як показано нижче:

// Це призведе до помилки ERR_INVALID_ARG_TYPE
setTimeout(greet("Іван", "успішного кодування!"), 2000);

У наведеному вище коді функція greet виконується негайно, не чекаючи 2 секунд. Потім видається помилка. Результат виконання коду показано нижче:

Скасування setTimeout()

Ми можемо запобігти виконанню функції, запланованої за допомогою setTimeout(), використовуючи метод clearTimeout(). Це може знадобитися, якщо ми встановили функцію для виконання через певний час, але не хочемо її виконання після зміни умов.

Синтаксис методу clearTimeout() виглядає наступним чином:

clearTimeout(timeoutID)

clearTimeout() приймає один аргумент, timeoutID, який є унікальним ідентифікатором, повернутим методом setTimeout().

Розглянемо приклад:

function text() {
  console.log("Це не буде виведено");
}

function greet() {
  console.log("Привіт, через 5 секунд");
}

// Запланувати виконання функції text() через 3 секунди
const timeOutID = setTimeout(text, 3000);

// Скасувати таймер функції text() за допомогою clearTimeout()
clearTimeout(timeOutID);
console.log(`${timeOutID} скасовано`);

// Запланувати виконання функції greet() через 5 секунд
setTimeout(greet, 5000);

Вивід:

2 скасовано
Привіт, через 5 секунд

Функція text() не виконується, оскільки clearTimeout() використовується для скасування її тайм-ауту, таким чином запобігаючи її виконанню.

Переваги використання setTimeout()

Деякі з переваг використання методу setTimeout() включають:

  • Відкладене виконання коду – основна функція setTimeout() полягає в тому, щоб дозволити розробникам відкладати виконання коду. Це важлива функція під час створення анімації, керування тимчасовими подіями, а також керування потоком асинхронного коду. setTimeout() також звільняє основний потік для виконання іншого коду.
  • Реалізація таймера – setTimeout() забезпечує простий спосіб реалізації простих таймерів у програмі без необхідності використовувати зовнішні бібліотеки чи виконувати складні операції з датою.
  • Регулювання та усунення стрибків – setTimeout() можна використовувати для обмеження кількості викликів певних функцій або виконання дій, особливо під час таких подій, як прокручування чи введення. За допомогою усунення стрибків ваша програма чекає певний період часу, перш ніж викликати функцію. Регулювання обмежує кількість викликів функцій протягом певного періоду часу. setTimeout() можна використовувати для досягнення обох цих цілей.
  • Покращення взаємодії з користувачем – setTimeout() дозволяє покращити роботу користувача з вашою програмою, контролюючи, коли відбуваються певні дії, наприклад, коли відображаються сповіщення, попередження, спливаючі повідомлення та анімація. Це зручно для запобігання перевантаженню користувачами інформацією, що покращує взаємодію з ними.
  • Покращення продуктивності веб-сайту – setTimeout() можна використовувати для підвищення продуктивності та загальної швидкості реагування веб-додатків, розбиваючи складні проблеми на менші, набагато простіші завдання. Ці менші задачі можна вирішити всередині setTimeout(), дозволяючи іншим частинам коду продовжувати виконання, таким чином не впливаючи на продуктивність або швидкість реагування програми.

Очевидно, що setTimeout() є потужним і дуже корисним інструментом під час створення програм за допомогою JavaScript.

Недоліки використання setTimeout()

Деякі з недоліків використання setTimeout() включають:

  • Неточний час – setTimeout() не може гарантувати точний час виклику функції або виконання операції. Іноді інший погано написаний код призводить до конкуренції, яка впливає на роботу setTimeout(). Коли ви використовуєте кілька перекриваючих setTimeout(), ви не завжди можете бути впевнені в порядку виконання, особливо якщо задіяні інші асинхронні операції.
  • Пекло зворотного виклику – якщо у вас занадто багато вкладених викликів setTimeout(), ваш код може стати важко читати та налагоджувати. Також буде дуже важко стежити за логікою вашої програми. Використання занадто великої кількості setTimeout() може призвести до проблем з пам’яттю у вашій програмі, якщо виклики setTimeout() обробляються неправильно.

Хоча setTimeout() може запобігти деяким проблемам під час його використання, дотримуючись найкращих практик і хороших методів кодування, ви можете мінімізувати або повністю уникнути недоліків у своїй програмі.

Висновок

Метод setTimeout() можна використовувати для відкладення виконання функцій. setTimeout зазвичай використовується для анімації, відкладеного завантаження вмісту та обробки тайм-аутів для запитів.

Наприклад, ви можете використовувати setTimeout() для відображення сповіщень на своїх веб-сторінках. Хоча setTimeout() не гарантує точний час виконання функції, він гарантує її виконання після встановленої затримки.

Ви також можете дослідити платформи JavaScript ORM для ефективного кодування.