Блог

Главная - Вопросы по программированию - Выход из setInterval в Javascript

Выход из setInterval в Javascript

#javascript #effects #setinterval #rollover

#javascript #эффекты #setinterval #опрокидывание

Вопрос:

Я пытаюсь создать простой анимационный эффект 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>

Любые предложения будут высоко оценены.

Ответ №1:

Очистите предыдущий интервал перед установкой нового.

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