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. Завдяки його гнучкості та простоті використання, ця функція використовується в різноманітних сценаріях, що відкриває широкі можливості для створення динамічних та ефективних веб-додатків.

Синтаксис

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 мілісекунд.

*code

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

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

delay

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

arg1

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

Return

integer

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

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

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

Переглядачі

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

Приклади

• Приклад 1
• Приклад 2
• Приклад 3

// Установка таймера на 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("Всі завдання виконано!");
});