javascript - javascript_setInterval in combination with mouseenter -

here have simple animation:

if move on area (300 x 250px), 4 pics move left right (one after another). problem is, setinterval getting faster more move on area.

i think problem setinterval in combination event mouseenter ...but dont know how solve problem.

wrapper.addeventlistener("mouseenter", function(e) {    = 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 {        = 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>

each time mouseenter event gets hit, you're resetting variables, more importantly - interval.

define variables outside of events, , make sure set interval if hasn't been set. additionally, interval has no end. should consider stopping once animation complete.

i've moved animation function neaten things slightly, , cleared interval once animation complete using clearinterval().

//initialize interval (and variables) outside of interval  var interval = null;  var = 0;  var ziel = 75;  var numberbild = 1;  var currentmove = -75;  var numberofbilds = 4;    function resetvars() {    = 0;    ziel = 75;    numberbild = 1;    currentmove = -75;    (var j = 1; j <= numberofbilds; j++) {      document.getelementbyid('bild-move-' + j).style.marginleft = 0;    }  }    //function start animation  function startanimation() {      //only set interval if hasn't 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 still bilds left animated, increment , continue          if (numberbild <= numberofbilds) {            = 0;            numberbild = numberbild + 1;          } else { //otherwise, animation complete, clear 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>