clearInterval не сбрасывается - PullRequest
Новая
       17

clearInterval не сбрасывается

0 голосов
/ 23 марта 2019

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

Первый запуск intervalToTick равен 1.6 секундам, но если я снова запускаю функцию, она удваивается и увеличивается с каждым сбросом (работает в первый раз)

Мое решение было, поскольку я использовал mobX, чтобы добавить myTimer в качестве @ наблюдаемой в магазине, а затем перейти к ответу ниже 

const ticker = function() {
  if (store.timer < 100) {
    store.addToTimer() //mobX store action to add 1+ to the store.timer
  }

};

function progress() {
  store.timer = 0
  let time = Moment()
  let songEnd = Moment().add(1, "minutes")
  const durationToFinnish = Moment.duration(songEnd.diff(time));
  const intervalToTick = 100000 / durationToFinnish.asMilliseconds()

  //Dumb to have it 2 times but cant figure of another way
  var myTimer = window.setInterval(ticker, intervalToTick * 1000);
  clearInterval(myTimer);
  myTimer = window.setInterval(ticker, intervalToTick * 1000);
}
<div className={classes.progressBar} id="progress">
  <div className={classes.innerProgressBar}>
    <span onClick={progress}>{store.timer}%</span><br></br>
  </div>
</div>

1 Ответ

3 голосов
/ 24 марта 2019

Вы должны задать для переменной таймера более высокую область видимости, чтобы к ней можно было обращаться как из progress, так и ticker, и вам необходимо очистить интервал, если он уже запущен, чтобы вы не могли одновременно запускать несколько интервалов.: 

var myTimer = null; // Declared here so it can be used in both functions

const ticker = function () {
  if(store.timer < 100){
    store.addToTimer() //mobX store action to add 1+ to the store.timer
  }      
};

function progress() {        
  store.timer = 0
  let time = Moment()
  let songEnd = Moment().add(1, "minutes")
  const durationToFinnish = Moment.duration(songEnd.diff(time));
  const intervalToTick = 100000 / durationToFinnish.asMilliseconds()  
  // Check to see if there is already a timer running
  if(myTimer){
    clearInterval(myTimer); // Stop the interval   
  }
  myTimer = setInterval(ticker, intervalToTick * 1000);    
}
<div className={classes.progressBar} id="progress">
            <div className={classes.innerProgressBar}>
                <span onClick={progress}>{store.timer}%</span><br></br>
            </div>
        </div>
...