title: javascript_setInterval in combination with mouseenter
body: <p>Here I have a really simple animation:</p>
  
  <p>If you move over the area (300 x 250px), four pics will move from left to right (one after another). The problem is, that the setInterval getting faster the more often I move over the area.</p>
  
  <p>I think the problem is the setInterval in combination with the event mouseenter ...but I dont know how to solve the problem.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>wrapper.addEventListener("mouseenter", function(e) {
    i = 0;
    ziel = 75;
    numberBild = 1;
    currentMove = -75;
  
    interval = window.setInterval(function() {
      if (i &lt; ziel &amp;&amp; numberBild &lt;= 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);
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="wrapper" style="width:300px;height:250px;border:1px solid #dcdddd; "&gt;
    &lt;a id="bild-move-1" href="&lt;mpvc/&gt;https://&lt;mpck/&gt;&amp;mpro=" target="_blank" style="position: absolute; z-index: 4; margin-left: -75px;"&gt;&lt;img src="bild_01-a.jpg" width="75" border="0"&gt;&lt;/a&gt;
    &lt;a id="bild-move-2" href="&lt;mpvc/&gt;https://&lt;mpck/&gt;&amp;mpro=" target="_blank" style="position: absolute; z-index: 3; margin-left: -75px;"&gt;&lt;img src="bild_01-a.jpg" width="75" border="0"&gt;&lt;/a&gt;
    &lt;a id="bild-move-3" href="&lt;mpvc/&gt;https://&lt;mpck/&gt;&amp;mpro=" target="_blank" style="position: absolute; z-index: 2; margin-left: -75px;"&gt;&lt;img src="bild_01-a.jpg" width="75" border="0"&gt;&lt;/a&gt;
    &lt;a id="bild-move-4" href="&lt;mpvc/&gt;https://&lt;mpck/&gt;&amp;mpro=" target="_blank" style="position: absolute; z-index: 1; margin-left: -75px;"&gt;&lt;img src="bild_01-a.jpg" width="75" border="0"&gt;&lt;/a&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>