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

Наповнення JS розділу

Добридень, Пані та Панове, завдяки вам вдалося зібрати більше 19тис грн з необхідних 15тис на впровадження JS розділу.

JS розділ вже впроваджено - переходимо до його наповнення і почнемо бігти довгий марафон, адже JS має більше 1100 різноманітних методів, властивостей, подій і т.д., які необхідно описати.

Будемо працювати, і вдень, і вночі, щоб орієнтовно взимку закінчити наповнювати JS розділ!

Ви також можете допомогти нам в цьому. Долучайтеся до нашої спільноти в дискорді - ставайте її частиною і допомагайте нашому розвитку.

Також, підтримуйте нас матеріально.

Підтримати матеріально

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); // Обов'язково припиніть інтервал
Порада:

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

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

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

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

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

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

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

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

Синтаксис

clearInterval(intervalID)

Параметри

*intervalID

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

Return

none

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

Переглядачі

Переглядач

1

1

1

4

12
Переглядач

37

18

4

1
Переглядач

0.10.0

1.0

Приклади


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

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

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

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

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

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

У цьому прикладі ми створюємо анімацію об'єкта, який рухається вліво та вправо на сторінці. Функція animateObject викликається кожні 16 мілісекунд (приблизно 60 FPS) за допомогою setInterval(). Ми також використовуємо clearInterval() для припинення анімації при наведенні курсору миші на об'єкт і її поновлення при виведенні курсору.

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

Документи

Зв'язок