这里我有一个非常简单的动画：
如果您在该区域（300 x 250px）上移动，则四个图片将从左向右移动（一个接一个）。问题是，setInterval变得越来越快，我越频繁地越过该区域。
我认为问题是setInterval与事件mouseenter结合......但我不知道如何解决问题。
wrapper.addEventListener("mouseenter", function(e) {
i = 0;
ziel = 75;
numberBild = 1;
currentMove = -75;
interval = window.setInterval(function() {
if (i < ziel && numberBild <= 4) {
currentMove = currentMove + 1;
console.log(i);
console.log(document.getElementById('bild-move-' + numberBild));
console.log(currentMove);
document.getElementById('bild-move-' + numberBild).style.marginLeft = currentMove + "px";
i++;
} else {
i = 0;
numberBild = numberBild + 1;
}
}, 10);
});<div id="wrapper" style="width:300px;height:250px;border:1px solid #dcdddd; ">
<a id="bild-move-1" href="<mpvc/>https://<mpck/>&mpro=" target="_blank" style="position: absolute; z-index: 4; margin-left: -75px;"><img src="bild_01-a.jpg" width="75" border="0"></a>
<a id="bild-move-2" href="<mpvc/>https://<mpck/>&mpro=" target="_blank" style="position: absolute; z-index: 3; margin-left: -75px;"><img src="bild_01-a.jpg" width="75" border="0"></a>
<a id="bild-move-3" href="<mpvc/>https://<mpck/>&mpro=" target="_blank" style="position: absolute; z-index: 2; margin-left: -75px;"><img src="bild_01-a.jpg" width="75" border="0"></a>
<a id="bild-move-4" href="<mpvc/>https://<mpck/>&mpro=" target="_blank" style="position: absolute; z-index: 1; margin-left: -75px;"><img src="bild_01-a.jpg" width="75" border="0"></a>
</div>
答案 0 :(得分：0)
每次mouseenter事件被点击时，您都会重置所有变量，但更重要的是 - 您的间隔。
在所有事件之外定义变量，并确保仅设置间隔（如果尚未设置）。此外，您的间隔没有结束。一旦动画完成，你应该考虑停止它。
我已将您的动画移动到一个功能，以便稍微整理一下，并在动画完成后使用clearInterval()清除您的间隔。
//Initialize interval (and variables) outside of the interval
var interval = null;
var i = 0;
var ziel = 75;
var numberBild = 1;
var currentMove = -75;
var numberOfBilds = 4;
function resetVars() {
i = 0;
ziel = 75;
numberBild = 1;
currentMove = -75;
for (var j = 1; j <= numberOfBilds; j++) {
document.getElementById('bild-move-' + j).style.marginLeft = 0;
}
}
//Function to start the animation
function startAnimation() {
//Only set the interval if it hasn't already been set
if (interval == null) {
resetVars();
interval = setInterval(function() {
if (i < ziel && numberBild <= 4) {
currentMove = currentMove + 1;
document.getElementById('bild-move-' + numberBild).style.marginLeft = currentMove + "px";
i++;
} else {
//If there are still Bilds left to be animated, increment and continue
if (numberBild <= numberOfBilds) {
i = 0;
numberBild = numberBild + 1;
} else { //otherwise, animation is complete, clear the interval
clearInterval(interval);
interval = null;
}
}
}, 10);
}
}
wrapper.addEventListener("mouseenter", startAnimation);<div id="wrapper" style="width:300px;height:250px;border:1px solid #dcdddd; ">
<a id="bild-move-1" href="<mpvc/>https://<mpck/>&mpro=" target="_blank" style="position: absolute; z-index: 4; margin-left: -75px;"><img src="bild_01-a.jpg" width="75" border="0"></a>
<a id="bild-move-2" href="<mpvc/>https://<mpck/>&mpro=" target="_blank" style="position: absolute; z-index: 3; margin-left: -75px;"><img src="bild_01-a.jpg" width="75" border="0"></a>
<a id="bild-move-3" href="<mpvc/>https://<mpck/>&mpro=" target="_blank" style="position: absolute; z-index: 2; margin-left: -75px;"><img src="bild_01-a.jpg" width="75" border="0"></a>
<a id="bild-move-4" href="<mpvc/>https://<mpck/>&mpro=" target="_blank" style="position: absolute; z-index: 1; margin-left: -75px;"><img src="bild_01-a.jpg" width="75" border="0"></a>
</div>
答案 1 :(得分：0)
要解决Santi指出的问题，试试这个：
var interval;//global scope
wrapper.addEventListener("mouseenter", function(e) {
var i = 0,
ziel = 75,
numberBild = 1,
currentMove = -75;
interval = interval || window.setInterval(function() { //just set if it doesnt exist already
if (i < ziel && numberBild <= 4) {
currentMove = currentMove + 1;
console.log(i,document.getElementById('bild-move-' + numberBild),currentMove);
document.getElementById('bild-move-' + numberBild).style.marginLeft = currentMove + "px";
i++;
} else {
i = 0;
numberBild = numberBild + 1;
}
}, 10);
});
在mouseout上，您可能想要重置间隔：
wrapper.addEventListener("mouseout", function(e) {
window.clearInterval(interval);
interval=null;
});
答案 2 :(得分：0)
请尝试此代码......
用以下代码替换脚本并尝试
我只是重置（清除）鼠标输出事件的间隔
<script>
var interval = 1;
wrapper.addEventListener("mouseenter", function(e) {
i = 0;
ziel = 75;
numberBild = 1;
currentMove = -75;
interval = window.setInterval(function() {
if (i < ziel && numberBild <=4) {
currentMove = currentMove + 1;
//console.log (i);
//console.log (document.getElementById('bild-move-'+ numberBild));
//console.log (currentMove);
document.getElementById('bild-move-'+ numberBild).style.marginLeft = currentMove + "px";
i++;
} else {
i = 0;
numberBild = numberBild + 1;
}
}, 10);
});
wrapper.addEventListener("mouseout", function(e) {
clearInterval(interval);
});
答案 3 :(得分：0)
我忘了一个重要的信息： 另一个问题是，一旦移动结束并且触发了新的鼠标中心事件，就应该重复动画
我自己尝试使用您的代码示例。它有效......但也许不是那么雄辩
<script>
//Initialize interval (and variables) outside of the interval
var interval = null;
var indexA = 0;
var ziel = 75;
var numberofThePic = 1;
var currentMove = -75;
//Function to start the animation
function startAnimation() {
//Only set the interval if it hasn't already been set
if (interval == null) {
interval = setInterval(function() {
if (numberofThePic <=4) {
if (indexA < ziel){
currentMove = currentMove + 1;
document.getElementById('bild-move-'+ numberofThePic).style.marginLeft = currentMove + "px";
indexA++;
} else {
indexA = 0;
numberofThePic = numberofThePic + 1;
}
} else {
//otherwise, animation is complete, clear the interval
setTimeout(function(){
for (var indexB = 4; indexB >= 1; indexB--) {
document.getElementById('bild-move-'+ indexB).style.marginLeft = -75 + "px";
}
indexA = 0;
numberofThePic = 1;
currentMove = -75;
clearInterval(interval);
interval = null;
}, 2000);
}
}, 10);
}
}
wrapper.addEventListener("mouseenter", startAnimation);
</script>