javascript_setInterval在了mouseenter

这里组合我有一个非常简单的动画：javascript_setInterval在了mouseenter

如果你搬过来的面积（300×250像素），四图片从左至右（陆续）移动。问题是，setInterval在我越过这个区域越频繁越快。

我认为问题是与事件mouseenter组合的setInterval ...但我不知道如何解决问题。

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>

来源

2017-04-14 LolaRuns

你问一个问题下一次，请与[这里]熟悉（https://meta.stackexchange.com/questions/43478/exit-strategies - 为变色龙问题）编辑前。 – Santi

您的每一个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>

来源

2017-04-14 16:08:53 Santi

您的结果几乎完美。但问题是，只要动作完成并且触发了一个新的鼠标输入事件，就应该重复他的动画 – LolaRuns

请阅读[this]（https://meta.stackoverflow.com/questions/309237/dealing-with - 问题 - 我编辑后 - 答案已被接受），或[this]（https://meta.stackoverflow.com/questions/299405/should-a-question-edit-be如果它看起来是一个后续的答案），或[this]（https：// meta）。stackoverflow.com/questions/253762/link-for-poor-or-ever-growing-questions-to-better-explain-why-people-stop-answer） - 我回答了你的问题，你接受了它，然后你改变了你的问题...我编辑了我的答案，但前进，请意识到这是不好的做法。 – 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); 
});

鼠标移开时，你可能需要的时间间隔复位：

wrapper.addEventListener("mouseout", function(e) { 
    window.clearInterval(interval); 
    interval=null; 
});

来源

2017-04-14 16:10:27

请试试这个代码...

与下面的代码替换脚本，并尝试

我只是重置鼠标出事件（全部清除）间隔

<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); 
});

来源

2017-04-14 16:18:43

忘了重要信息： 进一步的问题是，即动作完成后应立即重复他的动画并触发新的鼠标事件

我试过我我自己用你的代码示例。它的工作原理......但也许它不是雄辩

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

来源

2017-04-14 19:33:19 LolaRuns

javascript_setInterval在了mouseenter

回答

相关问题