자바에서 setInterval 끝내기

간단한 onmouseover 애니메이션 효과를 만들려고합니다. 사용자가 div 위로 마우스를 가져 가면 상대적으로 위치가 지정된 div가 튀어 오르게됩니다. 그러나 코드는 루핑을 계속하고 왜 작동하지 않을 수 있습니다 - 내가 setInterval() 나쁘게 사용하고 있습니까? 여기에 있습니다 :자바에서 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>

모든 의견을 보내 주시면 감사하겠습니다.

출처

2011-10-14 Sceletia

새 간격을 설정하기 전에 이전 간격을 지우십시오.

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

출처

2011-10-14 10:38:59

덕분에 롭 (Rob)은 매력처럼 작동했습니다. – Sceletia

답변

관련 문제