Question

我正在尝试创建一个简单的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>

我们非常感谢任何建议。

Answer 1

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

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

在Javascript中退出setInterval

1 个答案: