Как прекратить повторяющийся вызов функции в JavaScript?

Оффтоп javascript
1

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

Вот пример моего кода:

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

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

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

2

Можно еще использовать requestAnimationFrame вместо setInterval. Это даст более плавное обновление и легкий контроль:

function обновить() {
// обновление данных
if (продолжатьОбновление) {
requestAnimationFrame(обновить);
}
}

let продолжатьОбновление = true;
requestAnimationFrame(обновить);

// для остановки:
продолжатьОбновление = false;

Этот способ более эффективен и меньше нагружает браузер. Попробуй, может понравится!

3

Чтобы остановить интервал, используй clearInterval(таймер). Но есть нюанс - если функция обновитьДанные асинхронная, могут быть проблемы. Лучше использовать флаг:

let активно = true;

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

обновитьДанные();

// для остановки:
активно = false;

Так надежнее и гибче. Проверено на практике.

4

для остановки интервала можно использовать функцию clearInterval(). вот как это может выглядеть:

function остановитьОбновление() {
clearInterval(таймер);
}

потом просто привяжи эту функцию к событию клика по кнопке, например:

document.getElementById(‘стопКнопка’).addEventListener(‘click’, остановитьОбновление);

это позволит юзеру самому контролировать, когда запускать обновление, а когда нет. удобно и просто в реализации. кстати, ещё можно добавить проверку, что таймер существует перед очисткой, чтобы избежать ошибок.