Gordon's clearInterval Tutorial

Part 1 Why sometimes it fails and how to make it work?

1.1 The target to animate

<div id="target"></div>
Try It Yourself

Note: In my example, I have coded the CSS scripts to make it visually a square.

1.2 Animating the square

var curLeft;

function moving(){
  curLeft = curLeft + 1;
  var maxLeft = window.innerWidth - 20 - 20;
  if (curLeft > maxLeft){
    curLeft = 20;
  }
  var target = document.getElementById("target");
  target.style.left = curLeft + "px";
}

window.onload = function(){
  curLeft = 20;
  setInterval(moving,10);
}
Try It Yourself

Note: clearInterval can stop any repeating process caused by setInterval, here I am using an animation just for visualization.

1.3 Adding the buttons

<div id="sep"></div>
<button id="playBtn" onclick="myPlay()">Play</button>
<button id="pauseBtn" onclick="myPause()">Pause</button>
Try It Yourself

Note: The ReferenceError of "myPlay is not defined" and "myPause is not defined" is because we successfuly used onclick attribute of the button tags to add the click event listener. Next, I am going to build these two functions, in the wrong way for demo purpose.

1.4 Defining myPlay() and myPause()

function myPlay(){
  clearInterval(animateInterval);
  var animateInterval = setInterval(moving,10);
}

function myPause(){
  clearInterval(animateInterval);
}
Try It Yourself

Note: When click Pause button, ReferenceError: "animateInterval is not defined", reason is animateInterval belongs to myPlay(), and hence myPause() cannot find animateInterval to clear it.

1.5 Declaring the interval variable in the global scope

var animateInterval;
Try It Yourself

Note: Notice that we have removed the keyword var in myPlay(). Now the declaration of animateInterval is before any function. In this way, the myPause() can access this variable.