JS метод Object.clearInterval()

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

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

Найбільш поширений сценарій використання clearInterval() - це зупинка інтервального таймера. Припустимо, у нас є таймер, який виводить повідомлення в консоль кожні 2 секунди:

let intervalId = setInterval(() => {
  console.log("Таймер працює!");
}, 2000);

Для зупинки цього таймера використовуємо clearInterval():

clearInterval(intervalId);

Розширене Використання

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

let count = 0;
let intervalId = setInterval(() => {
  console.log("Повторення: " + count);
  if (count === 5) {
    clearInterval(intervalId);
    console.log("Таймер зупинено!");
  }
  count++;
}, 1000);

У цьому випадку таймер зупиняється після п’яти ітерацій.

Комбінування з іншими Функціями

clearInterval() може бути ефективно комбінований з іншими функціями для створення складніших логік. Наприклад, ви можете використовувати setTimeout() для старту інтервалу після затримки:

setTimeout(() => {
  let intervalId = setInterval(() => {
    console.log("Таймер активовано!");
  }, 2000);

  setTimeout(() => {
    clearInterval(intervalId);
    console.log("Таймер зупинено!");
  }, 10000);
}, 5000);

Тут таймер починає працювати через 5 секунд після запуску скрипта, а потім зупиняється через 10 секунд.

правити

Порада

Щоб уникнути проблем з пам'яттю, завжди використовуйте метод clearInterval() після закінчення роботи з інтервалом. Не залишайте невикористовані інтервали, оскільки це може призвести до витоку пам'яті і негативного впливу на продуктивність програми. Наприклад:

const intervalId = setInterval(() => {
 // Робота, яка виконується з інтервалом
}, 2000);

// Після завершення роботи з інтервалом
clearInterval(intervalId); // Обов'язково припиніть інтервал

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

Порада

Потрібно бути уважним при використанні clearInterval(), оскільки неправильне використання може призвести до небажаних поведінок. Наприклад, важливо уникати зупинки таймера, який вже був зупинений або не був запущений, оскільки це може призвести до помилок.

Якщо ви хочете змінити інтервал під час його виконання, спочатку припиніть поточний інтервал за допомогою clearInterval(), а потім створіть новий інтервал з оновленими налаштуваннями.

Приклад зміни інтервалу на 3 секунди після початкового запуску на 2 секунди:

const intervalId = setInterval(() => {
 console.log("Цей інтервал почався з інтервалом 2 секунди.");
 clearInterval(intervalId); // Припиніть поточний інтервал
 const updatedIntervalId = setInterval(() => {
   console.log("Цей інтервал має оновлений інтервал 3 секунди.");
 }, 3000);
}, 2000);

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

Порада

Пам'ятайте, що інтервальні функції виконуються асинхронно, тому будьте обережні при роботі зі змінними, які можуть змінюватися в іншому місці коду під час виконання інтервалу. Використовуйте замикання (closures) або передавайте параметри функції, щоб уникнути неочікуваної поведінки вашого коду.

Приклад передачі параметра у функцію інтервалу:

const message = "Привіт з інтервалу!";
const intervalId = setInterval((msg) => {
 console.log(msg);
}, 2000, message);

Цей приклад передає змінну message у функцію інтервалу, щоб забезпечити доступ до неї під час виконання інтервалу.

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

+ додати пораду чи нотатку

Синтаксис

clearInterval(intervalID)

Параметри

intervalID

Ідентифікатор повторюваної дії, яку ви хочете скасувати. Цей ідентифікатор був повернутий відповідним викликом setInterval().

автор: Bond

правити

Повернення

none

Повертає значення "undefined" (не визначено).

автор: Bond

правити

Переглядачі

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

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

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

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

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

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

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

Приклади

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

<div class="animated-object">перший елемент animated-object</div>
<div class="animated-object">другий елемент animated-object</div>

const object = document.querySelector(".animated-object");
let position = 0;
let direction = 1;
let animationInterval;

const animateObject = () => {
  position += direction;
  object.style.left = position + "px";

  if (position >= 300 || position <= 0) {
    direction *= -1;
  }
};

const startAnimation = () => {
  animationInterval = setInterval(animateObject, 16); // 60 FPS
};

const stopAnimation = () => {
  clearInterval(animationInterval);
};

startAnimation();

object.addEventListener("mouseenter", stopAnimation);
object.addEventListener("mouseleave", startAnimation);

// Задаємо початковий лічильник
let counter = 0;

// Функція, яка буде виконуватися щоразу через певний інтервал
const timerFunction = () => {
  console.log(`Час минув: ${counter} секунд`);
  counter++;

  // Якщо лічильник досягнув 5 секунд, припиняємо таймер
  if (counter === 5) {
    clearInterval(timerInterval);
    console.log("Таймер завершено.");
  }
};

// Встановлюємо інтервал виконання функції (1 секунда)
const timerInterval = setInterval(timerFunction, 1000);