How to start setInterval from the same place?

Question

JavaScript

I have a 3 second looping animation, by pressing pause for example at the 2nd second and then starting, my animation continues where it left off, but the remaining 1 second stretch is extended by 3 seconds. How to make the timer "play out" the remaining period of time, and then "play" a full cycle?

function Pause() {
  if (!paused){
    clearInterval(timer);
    paused = true;
  } 
    else {
    	timer = setInterval(change, 3000); 
    	paused = false;
    }
}

Answer 1

No need to call clearInterval , just return from change if paused === true .

Answer 2

var pauseButton = document.querySelector(".pause-button"),
    start = Date.now(),
    duration = 3000,
    timePassed,
    paused;



var timer = setInterval(change, duration);

pauseButton.addEventListener("click", function() {
  if (!paused) {
    clearInterval(timer);
    timePassed = Date.now() - start;
    paused = true;
  } else {
    setTimeout(function() {
      timer = setInterval(change, duration);
    }, duration - timePassed);

    paused = false;
  }
}, false);



function change() {
  // ...
}

upd: The original version was somewhat incorrect - corrected.