setInterval() в JavaScript — повторювати код через проміжок

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

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

правити

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

Виглядає зручно, але має підступну ваду: інтервал не чекає на завершення попереднього виклику. Якщо функція виконується довше за проміжок, виклики почнуть накопичуватись і накладатись один на одного.

Саме тому для повторюваних запитів надійніше ланцюжок із setTimeout: наступний виклик планується після того, як попередній закінчився.

Для анімацій його не беруть узагалі — там є requestAnimationFrame, синхронізований із частотою екрана.

правити

Порада

Зберігайте ідентифікатори таймерів для подальшого контролю над ними. Використовуйте 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

Приклади

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

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

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

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

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

<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);

<header>
  <h2 class="title">setInterval() Function</h2>
  <p class="description">Цей метод використовується для виклику функції або виразу з заданим інтервалом часу.</p>
</header>
<main>
  <div class="result">
    <p id="counter">0</p>
    <button onclick="startInterval()">Start Interval</button>
    <button onclick="stopInterval()">Stop Interval</button>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

let counterValue = 0;
let interval;

function updateCounter() {
  document.getElementById("counter").innerText = counterValue;
  counterValue++;
}

function startInterval() {
  interval = setInterval(updateCounter, 1000);
}

function stopInterval() {
  clearInterval(interval);
  alert("Interval Stopped!");
}
//# sourceURL=pen.js

let seconds = 0;

const id = setInterval(() => {
    seconds++;
    console.log(seconds);

    if (seconds === 5) {
        clearInterval(id); // інакше тікатиме вічно
    }
}, 1000);

// для запитів надійніше так: наступний — ПІСЛЯ попереднього
async function poll() {
    await fetch('/api/status');
    setTimeout(poll, 5000);
}