Как вызвать clearInterval из другой функции - PullRequest
Новая
       3

Как вызвать clearInterval из другой функции

0 голосов
/ 15 марта 2020

Я пытаюсь реализовать секундомер. При нажатии кнопки запуска вызывается setInterval. Как я могу остановиться, запустив clearInterval при нажатии кнопки останова, не имея глобальной переменной для передачи в качестве параметра clearInterval 

  <body>
    <p class="clock">00:00:00</p>
    <button class='start'>Start</button>
    <button class="stop">Stop</button>
    <script>
      let totalMilliSeconds = 0;
      function tick(){
        totalMilliSeconds++;
          let hours = Math.floor(totalMilliSeconds/3600)
          let minutes = Math.floor(totalMilliSeconds/3600)
          let seconds = Math.floor(totalMilliSeconds/360)
          document.querySelector('.clock').textContent = `${hours}:${seconds}:${totalMilliSeconds}`
      }
      function start(){
        return setInterval(tick,1)
      }
      document.querySelector('.start').addEventListener('click',start)
      document.querySelector('.stop').addEventListener('click',start)
    </script>
    <p>
  </body>
</html>

Ответы [ 3 ]

1 голос
/ 15 марта 2020

Вам явно нужно хранить ссылку на интервал где-то . Непонятно, что вы имеете в виду, не имея глобальной переменной; Одним из решений было бы объявить его сверху: 

  let totalMilliSeconds = 0;
  let interval = null;
  function tick(){
    totalMilliSeconds++;
      let hours = Math.floor(totalMilliSeconds/3600)
      let minutes = Math.floor(totalMilliSeconds/3600)
      let seconds = Math.floor(totalMilliSeconds/360)
      document.querySelector('.clock').textContent = `${hours}:${seconds}:${totalMilliSeconds}`
  }
  function start(){
    if (!interval) interval = setInterval(tick,1);
    return interval;
  }

  function stop() {
    if (interval) clearInterval(interval);
    interval = null;
  }
  document.querySelector('.start').addEventListener('click',start)
  document.querySelector('.stop').addEventListener('click',stop)

Благодаря областям действия JS переменная interval будет доступна во всех функциях, объявленных в сценарии.

0 голосов
/ 15 марта 2020

Если вы хотите избежать глобальных переменных, вы можете заключить все это в объявление функции, а затем немедленно вызвать ее. Любые переменные, объявленные с var или let, будут существовать только в области действия функции.

Пример с использованием примера кода Кристофа: 

(function() {

  let totalMilliSeconds = 0;
  let interval = null;

  function tick(){
    totalMilliSeconds++;
      let hours = Math.floor(totalMilliSeconds/3600)
      let minutes = Math.floor(totalMilliSeconds/3600)
      let seconds = Math.floor(totalMilliSeconds/360)
      document.querySelector('.clock').textContent = `${hours}:${seconds}:${totalMilliSeconds}`
  }

  function start(){
    if (!interval) interval = setInterval(tick,1);
    return interval;
  }

  function stop() {
    if (interval) clearInterval(interval);
    interval = null;
  }

  document.querySelector('.start').addEventListener('click',start)
  document.querySelector('.stop').addEventListener('click',stop)

})();

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures

0 голосов
/ 15 марта 2020

Вам просто нужно использовать идентификатор интервала, возвращаемый setInterval(). В вашем случае вы можете сделать что-то подобное: 

let intervalId;
document.querySelector('.start').addEventListener(
    'click',
    () => {intervalId = start();}
);

Тогда вы можете сделать clearInterval(intervalId), когда захотите.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...