Как прекратить выполнение setInterval в JavaScript?

Оффтоп javascript
1

Привет всем! У меня возник вопрос по JavaScript. Я использую функцию setInterval(), чтобы вызывать другую функцию каждые 10 секунд. Выглядит это примерно так:

function обновитьДанные() {
  // Код для обновления данных
}

let интервал = setInterval(обновитьДанные, 10000);

Но теперь мне нужно дать пользователю возможность остановить это периодическое обновление. Как я могу прервать выполнение setInterval по какому-то событию, например, по нажатию кнопки? Буду благодарен за любые подсказки!

2

Для остановки setInterval используй clearInterval(). Вот пример:

let кнопкаСтоп = document.getElementById('стоп');
кнопкаСтоп.addEventListener('click', () => {
  clearInterval(интервал);
});

Это прервет выполнение функции обновитьДанные(). Удобно сохранять ID интервала в переменную, чтобы потом его остановить. Можно также добавить проверку, запущен ли интервал, перед остановкой.

3

Можно ещё добавить флаг для отслеживания состояния интервала:

let активен = true;

function обновитьДанные() {
  if (!активен) return;
  // остальной код
}

let интервал = setInterval(обновитьДанные, 10000);

function остановить() {
  активен = false;
  clearInterval(интервал);
}

Так мы избежим лишних вызовов, если интервал уже остановлен. Плюс можно легко возобновить обновление, просто переключив флаг обратно.

4

а еще можно сделать кнопку для возобновления обновлений. это удобно если юзер передумает. вот пример:

let интервал;
let активен = false;

функция запуститьОбновления() {
  if (!активен) {
    интервал = setInterval(обновитьДанные, 10000);
    активен = true;
  }
}

функция остановитьОбновления() {
  if (активен) {
    clearInterval(интервал);
    активен = false;
  }
}

так можно и останавливать и запускать обновления когда нужно. главное не забыть добавить обработчики событий для кнопок.