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

Синтаксис

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

delay

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

arg1

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

Return

integer

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

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

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

Переглядачі

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

Приклади

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

<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="true">
  See the Pen <a href="https://codepen.io/css_in_ua/pen/BabBLYy">
  Untitled</a> by css.in.ua (<a href="https://codepen.io/css_in_ua">@css_in_ua</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

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

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

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

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

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

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

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