Q:

Exiting setInterval in Javascript

I'm trying to create a simple onmouseover animation effect, so that when a user mouses over a div, the relatively positioned div within bounces.  However, the code keeps looping and I can't work out why - am I using setInterval() badly?  Here it is: 
<html>
<head>
<title>Bouncer Test Page</title>

<style rel="stylesheet" type="text/css">
div#container{
background-color: #ffffff;
width:200px;
height: 100px;
text-align:center; 
}

div#bouncer{
position:relative;
top:50px;
}

</style>
</head>
<body>
<div id="container">
<div id="bouncer">
<img src="button.jpg"/>
</div>
<!--  end of the #bouncer div -->
</div>
<!--  end of the #container div -->
<script>

var selDiv = document.getElementById("bouncer"); 
var containerDiv = document.getElementById("container");
var index = 10; 
var intervalHandle1; 

function popImage(){
selDiv.style.top = relativeHeights[index];
index--;    
        if(selDiv.style.top === '0px'){
        index = 0; 
        window.clearInterval(intervalHandle1);
        dropImage(index, intervalHandle1); 
        }
}

window.onload = function(){
relativeHeights = ['0px', '5px', '10px', '15px', '20px', '25px', '30px', '35px', '40px', '45px', '50px'];
containerDiv.onmouseover = function(){ 
intervalHandle1 = setInterval(popImage, 50); 
}

}
// end of the window.onload anonymous function

function dropImage(){
console.log("dropImage was called with index of " + index + ".  intervalHandle1 was set to   " + intervalHandle1

// insert dropImage code here
); 
}

</script>
</body>
</html>

Any suggestions would be much appreciated.   

A:

Clear the previous interval before setting a new one. 
containerDiv.onmouseover = function(){
    clearInterval(intervalHandle1);
    intervalHandle1 = setInterval(popImage, 50); 
}

