javascript_setInterval en combinaison avec mouseenter

Question

Ici, j'ai une animation très simple:

Si vous vous déplacez sur la zone (300 x 250 pixels), quatre photos se déplaceront de gauche à droite (un après l'autre). Le problème est, que setInterval devient plus vite le plus souvent je me déplace sur la zone.

Je pense que le problème est le setInterval en combinaison avec l'événement mouseenter ... mais je ne sais pas comment résoudre le problème.

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>

Answer 1

Chaque fois que votre événement mouseenter est touché, vous remettre à zéro toutes vos variables, mais plus important encore - votre intervalle.

Définissez vos variables en dehors de tous les événements et assurez-vous que vous ne définissez votre intervalle que s'il n'a pas déjà été défini. De plus, votre intervalle n'a pas de fin. Vous devriez vraiment envisager de l'arrêter une fois votre animation terminée.

J'ai déplacé votre animation vers une fonction pour masquer légèrement les choses, et j'ai effacé votre intervalle une fois l'animation terminée en utilisant 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>

Answer 2

Pour résoudre le problème Santi a, essayez ceci:

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

Sur mouseout, vous pouvez réinitialiser l'intervalle:

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

Answer 3

S'il vous plaît essayez ce code ...

Remplacer script avec le code ci-dessous et essayez

i juste intervalle de réinitialisation (clair) sur l'événement souris sur

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

Answer 4

J'ai oublié une information importante: Un autre problème est que l'animation he devrait être répétée dès que le mouvement est terminé et un nouvel événement mouseenter a été déclenché

J'ai essayé t par moi-même avec vos exemples de code. Il fonctionne ... mais peut-être il est pas éloquent

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