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

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

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

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

Функція JavaScript setTimeout

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

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

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

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

Загальний синтаксис setTimeout() такий:

setTimeout(function, delay)

• функція – це функція, яка буде виконана через заданий час.
• затримка – час у мілісекундах, після якого має бути виконана передана функція. 1 секунда еквівалентна 1000 мілісекундам.

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

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

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

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

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

// setTimeout() with a function declaration
setTimeout(function () {
  console.log("Hello World after 3 seconds");
}, 3000)

// setTimeout() with an arrow function
setTimeout(() => {
  console.log("Hello World in an arrow function - 1 second")
}, 1000)

Вихід:

Hello World in an arrow function - 1 second
Hello World after 3 seconds

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

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

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

// function declaration
function greet() {
  console.log("Hello there!")
}

// store a function in a variable - function expression
const speak = function () {
  console.log("How are you doing?")
}

// using an arrow function
const signOff = () => {
  console.log("Yours Sincerely: techukraine.net:)")
}

// pass in a function reference to setTimeout()
setTimeout(greet, 1000)
setTimeout(speak, 2000)
setTimeout(signOff, 3000)

Вихід:

Hello there!
How are you doing?
Yours Sincerely: techukraine.net:)

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

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

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

Синтаксис такий:

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

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

Розглянемо функцію нижче:

function greet (name, message) {
  console.log(`Hello ${name}, ${message}`)
}

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

// setTimeOut() with additional parameters
function greet (name, message) {
  console.log(`Hello ${name}, ${message}`)
}

setTimeout(greet, 2000, "John", "happy coding!");

Вихід:

Hello John, happy coding!

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

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

// This results in an ERR_INVALID_ARG_TYPE error
setTimeout(greet("John", "happy coding!"), 2000);

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

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

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

Синтаксис методу clearTimeout() наведено нижче:

clearTimeout(timeoutID)

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

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

function text() {
  console.log("This is not going to be printed")
}

function greet() {
  console.log("Hello after 5 seconds")
}

// Schedule the function text() to be executed after 3 seconds
const timeOutID = setTimeout(text, 3000);

// cancelt text() timeout time using clearTimeout()
clearTimeout(timeOutID)
console.log(`${timeOutID} cleared out`)

// Schedule the function greet() to be executed after 5 seconds
setTimeout(greet, 5000)

Вихід:

2 cleared out
Hello after 5 seconds

Функція 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 для ефективного кодування.