css.in.ua
Підтримати

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

Порада:

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

const parameter = "`value`";
setTimeout((param) => {
   console.log(param);
}, 2000, parameter);
Порада:

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

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

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

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

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

Синтаксис

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

1

1

4

12
Переглядач

4.4

18

4

1
Переглядач

0.10.0

1.0

Приклади


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

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

У цьому прикладі ми використовуємо setTimeout() для симуляції асинхронного виконання завдань. Функція asyncTask приймає ім'я завдання та колбек-функцію. Завдання виводиться в консоль, а після імітації тривалості викликається колбек-функція. Це дозволяє ефективно управляти асинхронним виконанням коду та викликати функції після завершення певних операцій.

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

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

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

Спільнота

Зв'язок