有氧运动应用程序:清除位于功能范围内的间隔计时器

Question

这是CodePen上的有氧运动应用程序。http://codepen.io/Mahmoud-Zakaria/pen/vxWzxW?editors=1010当我想通过停止 btn 并清除其在函数范围内引用的间隔来停止有氧运动时，它不会停止/清除。

 (function() {
  //States
  let i = 5;
  let play = true;
  //DOM
  let cardioSec = document.getElementById('cardio-sec');
  let cardioStart = document.getElementById('cardio-start');
  let cardioStop = document.getElementById('cardio-stop');
  //Render
  function render(el) {
    el.innerHTML = i
  };

  //Audio
  let audio = new Audio("https://raw.githubusercontent.com/mahmoudZakaria90/myCodePenStuff/master/audio/Bepp-beep.mp3");
  //Setup 
  function setInterVals(times, callback) {
    i = times;
    let timer = setInterval(function() {
      console.log(i) //RENDER
      render(cardioSec)
      i--;
      if (i < 1) {
        clearInterval(timer);
        audio.play();
        callback();
      }
    }, 1000)
    return timer;
  }
  function start() {
    setInterVals(5, cardio);
  }
  function cardio() {
    setInterVals(30, rest);
  }
  function rest() {
    setInterVals(15, cardio);
  }
  function stopCardio() {
    clearInterval(setInterVals())
  }
  cardioStart.onclick = start
  cardioStop.onclick = stopCardio
})();

Answer 1

完成： http://codepen.io/anon/pen/gmdLMr?editors=1010

The "timer" variable was out of the scope, by declaring it as global, you wont have problems ^^