title: How to stop one eventListener when start another on the same element?
body: <p>I'm creating some kind of gallery in js as a practice. I found an error and I don't know how to solve it.</p>
  
  <p><strong>Full code of on JSFiddle</strong> -> 
      <a href="https://jsfiddle.net/feamor/5darpeby/" rel="nofollow noreferrer">Code</a></p>
  
  <p><strong>Background</strong></p>
  
  <p>I add two eventListeners to my img wrapper, 
  wrapper looks like that:</p>
  
  <pre><code>&lt;div class="gallery-item"&gt; &lt;-- wrapper
   &lt;img src=""&gt; &lt;-- image
   &lt;div&gt; &lt;-- overlay
   &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and listeners like that (listeners I'm adding during creating wrappers in js):</p>
  
  <pre><code>imageWrapper.addEventListener('mouseenter', enableOverlay, false);
  imageWrapper.addEventListener('mouseleave', disableOverlay, false);
  </code></pre>
  
  <p>Listeners invokes functions, which are responsible for displaying overlay over image. First of them show overlay with fade effect and the second one hide it with the same effect.</p>
  
  <p><em>enableOverlay</em></p>
  
  <pre><code>function enableOverlay(e) {
      var el = this.childNodes[1].style;
      el.display = 'block';
      (function fadeIn() {
          if (el.opacity &lt; 1) {
              el.opacity = parseFloat(el.opacity) + Number(0.1);
              setTimeout(fadeIn, 30);
          }
      }());
  }
  </code></pre>
  
  <p><em>disableOverlay</em></p>
  
  <pre><code>function disableOverlay(e) {
      var el = this.childNodes[1].style;
      (function fadeOut() {
          if (el.opacity &gt; 0) {
              el.opacity = parseFloat(el.opacity) - Number(0.1);
              setTimeout(fadeOut, 30);
          } else {
              el.display = 'none';
          }
      }());
  }
  </code></pre>
  
  <p><strong>Problem</strong></p>
  
  <p>On first sight everything is ok if I'm slowly move mouse over images - one function ends (opacity = 1) and the second is starting until opacity = 0. But when I'm moving mouse fast over images, overlays start to blink - opacity increases and decreases by 0.1 (value in IIFEs) and script loop. </p>
  
  <p>As I figured out, reason of this behavior is that <em>enableOverlay</em> dosen't finish (el.opacity dosen't reach 1) and in the same time <em>disableOverlay</em> starts. And I don't know how to fix this situation.</p>
  
  <p>I was trying to deal with it using flags which represents the state of fading function and breaks IFFEs, but it didn't help.</p>
  
  <p>Long story short, can anyone help me with this problem or show me a way of thinking to solve it?</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>In my opinion, my problem is 'how to stop function in one eventListener when another eventListeners is fired'. Changing opacity is only a sample. </p>