在 Javascript 中退出 setInterval答案

【问题标题】：Exiting setInterval in Javascript在 Javascript 中退出 setInterval
【发布时间】：2011-10-14 18:38:59
【问题描述】：

我正在尝试创建一个简单的 onmouseover 动画效果，以便当用户将鼠标悬停在 div 上时，相对定位的 div 内反弹。但是，代码一直在循环，我不知道为什么 - 我使用 setInterval() 不好？这里是：

<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>

任何建议将不胜感激。

【问题讨论】：

标签： javascript effects setinterval rollover

【解决方案1】：

在设置新间隔之前清除之前的间隔。

containerDiv.onmouseover = function(){
    clearInterval(intervalHandle1);
    intervalHandle1 = setInterval(popImage, 50); 
}

【讨论】：