JS метод Object.setInterval()

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

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

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

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

// Виклик функції кожні 2 секунди
const intervalId = setInterval(() => {
  console.log('Виклик функції кожні 2 секунди');
}, 2000);

// Зупинка інтервалу після 10 секунд
setTimeout(() => {
  clearInterval(intervalId);
  console.log('Інтервал зупинено після 10 секунд');
}, 10000);

У цьому прикладі функція, яка виводить повідомлення у консоль, буде викликана кожні 2 секунди за допомогою setInterval(). Після 10 секунд інтервал буде зупинений за допомогою clearInterval(), що забезпечить припинення виконання функції.

Використання для анімації:

// Анімація зміни розміру елемента кожні 100 мілісекунд
let element = document.getElementById('animatedElement');
let width = 50;

const animationInterval = setInterval(() => {
  width += 5;
  element.style.width = width + 'px';

  if (width >= 200) {
    clearInterval(animationInterval);
    console.log('Анімація завершена');
  }
}, 100);

У цьому прикладі ми використовуємо setInterval() для анімації зміни розміру елемента кожні 100 мілісекунд. Анімація завершиться, коли ширина елемента досягне 200 пікселів, і інтервал буде зупинений.

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

правити

Порада

Зберігайте ідентифікатори таймерів для подальшого контролю над ними. Використовуйте clearInterval() для зупинки виконання повторюваного коду.

clearInterval(`intervalId`);

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

Порада

Переконайтеся, що попередній інтервал завершено перед запуском нового. Уникайте накладань інтервалів, щоб уникнути непередбачуваної поведінки.

if (!`intervalId`) {
   `intervalId` = setInterval(() => {
       // Ваш код
   }, 2000);
}

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

Порада

Уникайте великих інтервалів, оскільки це може призвести до непродуктивного використання ресурсів. Розгляньте альтернативні методи асинхронної обробки завдань, якщо вони більше відповідають вашим потребам.

setTimeout(() => {
   // Викликати код один раз через 10 хвилин
}, 600000);

автор: 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 мілісекунд.

автор: Bond

правити

delay

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

автор: Bond

правити

arg1

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

автор: Bond

правити

Повернення

integer

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

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

Зауважте: Аргумент затримки (delay) конвертується в 32-бітне знакове ціле число, що ефективно обмежує його до 2147483647 мілісекунд, оскільки вказано як знакове ціле число в інтерфейсному описі мови програмування (IDL).

автор: Bond

правити

Переглядачі

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

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

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

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

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

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

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

Приклади

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

<div id="`data-display`">Демонстраційний елемент</div>

// Ініціалізація змінних
let data = 1;

// Функція для оновлення даних на сторінці
function updateData() {
  document.getElementById("`data-display`").innerText = "`Data:` " + data;
  data++;
}

// Запуск автоматичного оновлення кожні 2000 мілісекунд (2 секунди)
const dataUpdateInterval = setInterval(updateData, 2000);

// Ініціалізація змінних
let timerValue = 0;

// Функція для виведення значення таймера в консоль
function updateTimer() {
  console.log("`Timer:`", timerValue);
  timerValue++;
}

// Запуск таймера кожні 1000 мілісекунд (1 секунда)
const timerInterval = setInterval(updateTimer, 1000);

// Зупинка таймера після 5 секунд
setTimeout(() => {
  clearInterval(timerInterval);
  console.log("`Таймер зупинено.`");
}, 5000);

<iframe height="600" style="width: 100%;" scrolling="no" title="Untitled" src="https://codepen.io/css_in_ua/embed/BabBLYy?default-tab=js%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen></iframe>