Стоп и запуск функции при клике

Question

Всем доброго дня, есть функция, которая каждые 2 секунды выводит сообщение; Как сделать так, чтобы функция вначале была неактивна, а потом начинала работать при клике на кнопку "Включить функцию" и переставала работать при клике на "Вырубить функцию"

let go = setTimeout(function mes(){ 
alert('Вышел Мага погулять');     
go = setTimeout(mes, 2000);
},500)
 
 
let b =document.querySelector('.buttons');
 
b.addEventListener('click', function(e){
if(e.target.className == 'on'){
// что сюда дописать)?
}
 
else if(e.target.className == 'off'){
// и сюда)?
}
})

<div class ="buttons">
<button class ="on">Включить функцию</button>
<button class ="off">Вырубить функцию</button>
</div>

Answer 1

Ну например вот так можно реализовать твою функцию.

var interval = null;

function message() {
  console.log(123);
}

document.querySelector('.buttons').addEventListener('click', event => {
  if (event.target.classList.contains('on') && interval === null) {
    interval = window.setInterval(message, 2000);
  } else if (event.target.classList.contains('off') && interval !== null) {
    window.clearInterval(interval);
    interval = null;
  }
});

Answer 2

Ваш код можно слегка упростить. Это не самое "безопасное" и "правильное" решение, но работает безотказно.

<button id="counterBtn" data-working="false">Start/Stop Counter</button>

// Кнопка, с которой будем работать
let btn = document.querySelector("#counterBtn");

// ID счётчика
let counterId;

// Функция, которая будет вызываться
function counter() {
  console.log("Ваше сообщение");
}

btn.onclick = e => {
  if (e.currentTarget.dataset.working === "false") {
    /* В качестве флажка будем использовать аттрибут data-working
       Если он равен true, то счётчик работает и функция вызывается каждые 2 секунды
       Если false - то стоит */
    e.currentTarget.dataset.working = true;

    // Запускаем счётчик и выполняем нужную функцию
    counterId = setInterval(() => {counter()}, 2000);
  } else {
    e.currentTarget.dataset.working = false;

    // При повторном нажатии прекращаем выполнение
    clearInterval(counterId);
  }
}

БЛОГ НА HUSL

Стоп и запуск функции при клике

Ответы (2 шт):