JS метод Object.setTimeout()

Загальний опис

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

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

Використання в найпростіших випадках:

// Виклик функції через 3 секунди
setTimeout(() => {
  console.log('Цей код викличеться через 3 секунди');
}, 3000);

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

Використання для повторюваних викликів:

// Повторний виклик функції кожні 2 секунди
let counter = 0;
function repeatFunction() {
  console.log(`Цей код викличеться ${counter} раз`);
  counter++;

  if (counter === 5) {
    clearInterval(repeatInterval);
    console.log('Повторення завершено');
  }
}

const repeatInterval = setInterval(repeatFunction, 2000);

У цьому випадку ми використовуємо setInterval() в поєднанні з setTimeout() для повтореного виклику функції repeatFunction() кожні 2 секунди. Це може бути корисно для виконання певних дій на протязі часу або для анімації.

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

правити

Порада

Уникайте перевантаження таймерами, особливо в асинхронних операціях. Зберігайте ідентифікатор таймера та використовуйте clearTimeout() при необхідності.

const timerId = setTimeout(() => {
   // Ваш код
}, 3000);

// При необхідності скасувати таймер
// clearTimeout(timerId);

автор: Bond правити

Порада

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

const parameter = "`value`";
setTimeout((param) => {
   console.log(param);
}, 2000, parameter);

автор: Bond правити

Порада

Ретельно обробляйте помилки в коді, викликаному з setTimeout(), оскільки вони можуть бути важкими для відстеження. Використовуйте конструкцію try...catch для зручності відладки.

setTimeout(() => {
   try {
       // Ваш код
   } catch (error) {
       console.error(error);
   }
}, 500);

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

setInterval(code)
setInterval(code, delay)

setInterval(func)
setInterval(func, delay)
setInterval(func, delay, arg1)
setInterval(func, delay, arg1, arg2)
setInterval(func, delay, arg1, arg2, /* …, */ argN)

Параметри

func

Функція, яку слід викликати кожні delay мілісекунд. Перший виклик відбувається після delay мілісекунд.

автор: Bond

правити

code

Синтаксис, що дозволяє вставити рядок замість функції, який компілюється і виконується кожні delay мілісекунд.

Використання цього аргументу не рекомендується з тих же причин, що і використання eval() є ризиком для безпеки.

автор: Bond

правити

delay

Час у мілісекундах, на який таймер повинен затримати виклик вказаної функції або коду. За замовчуванням - 0, якщо не вказано.

автор: Bond

правити

arg1

Додаткові аргументи, які передаються функції, вказаній в func, після закінчення таймера.

автор: Bond

правити

Повернення

integer

Повертає числовий, ненульовий ідентифікатор інтервалу (intervalID), який ідентифікує таймер, створений викликом setInterval(). Це значення можна передати до clearInterval() для скасування інтервалу.

Важливо зазначити, що setInterval() та setTimeout() використовують спільний пул ідентифікаторів, і технічно clearInterval() та clearTimeout() можна використовувати взаємозамінно. Однак для ясності слід завжди відповідати їх використанню, щоб уникнути плутанини при підтримці коду.

Примітка: Аргумент затримки конвертується в 32-бітне ціле число зі знаком. Це ефективно обмежує затримку до 2147483647 мс, оскільки вона вказана як ціле число із знаком в специфікації IDL.

автор: Bond

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	1	4	12

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1

Підтримка: серверні переглядачі

Переглядач
	0.10.0	1.0

Приклади

+ запропонувати свій приклад у пісочниці

// Установка таймера на 3 секунди
let delayInMilliseconds = 3000; // затримка у мілісекундах (3 секунди)
setTimeout(() => {
    console.log("Пройшло 3 секунди!");
}, delayInMilliseconds);

// Симуляція асинхронного виконання завдань з використанням setTimeout()
function asyncTask(taskName, callback) {
    console.log(`Виконується завдання: ${taskName}`);
    setTimeout(() => {
        console.log(`Завдання "${taskName}" виконано.`);
        callback(); // виклик колбек-функції після завершення завдання
    }, 2000); // симуляція тривалості завдання у 2 секунди
}

// Виклик асинхронного завдання
asyncTask("Завдання 1", () => {
    console.log("Всі завдання виконано!");
});