можно ли реализовать запуск и остановку setInterval, или функции в которой он записан

Рейтинг: -1Ответов: 1Опубликовано: 16.08.2023

есть обычные часы, получение часов\минут\секунд через new Date(), и есть 2 кнопки
чтобы часы обновлялись и показывали корректное время, на функцию которая их выводит стоит setInterval(1000)
как сделать так, чтобы по нажатию на одну кнопку интервал сбрасывался, а по нажатию на другую заново присваивался и продолжал отображать текущее время?
много чего пробовал но так или иначе большинство предполагаемых мной решений сводилось к ограниченной области видимости - это присвоить интервал функции к примеру, но чтобы его остановить, нужно присвоить его еще и переменной, а переменная присвоенная внутри функции имеет ограниченную область видимости, вертелся вокруг чего-то подобного.
если после остановки интервала одной кнопкой, присвоить другой интервал другой кнопке все очевидно сработает, но как тогда снова остановить, если ко второй кнопке привязан интервал который теперь никак не связан с основной функцией

в общем была идея вместо манипуляций с интервалом, манипулировать самой функцией к которой он присвоен, и было бы 2 функции: одна с setInterval, другая с clearItnerval, вот здесь то и вылазит ограниченная область видимости

javascript html html5 функции setinterval
Источник: Stack Overflow на русском

Ответы

▲ 0Принят

как сделать так, чтобы по нажатию на одну кнопку интервал сбрасывался, а по нажатию на другую заново присваивался и продолжал отображать текущее время?

Примерно таким образом можно такое организовать...

(_ => {
  const op = document.querySelector('p')
  let d = new Date()
  let t = setInterval(test, 1000)
  beg.addEventListener('click', _ => {
    end.classList.remove('off')
    beg.classList.add('off')
    // время можно и не сбрасывать
    d = new Date()
    t = setInterval(test, 1000)
  })
  end.addEventListener('click', _ => {
    clearInterval(t)
    beg.classList.remove('off')
    end.classList.add('off')
    // часы можно и не обнулять
    op.textContent = ''
  })
  // 
  function test() {
    // для примера можно посмотреть сколько времени прошло
    let v = new Date() - d
    v = new Date(v)
    op.textContent = v.toISOString()
  }
})()
.off {
  display: none;
}
<button id='beg' class='off'>Старт</button>
<button id='end'>Сброс</button>
<p></p>