title: call clearInterval on mouseleave
body: <p>I'm trying to create an image slideshow with <code>setInterval</code> which starts playing when the mouse is over <code>.project-img</code> and pauses when the mouse leaves <code>.project-img</code>. The problem i'm having is calling clear interval on to pause the slideshow when the mouse leaves, I'm currently receiving the error: </p>
  
  <pre><code>Uncaught ReferenceError: cycle is not defined
  </code></pre>
  
  <p>Where am I going wrong?</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>var Image = {
      init: function() {
          Image.setupImages();
          Image.bindEvents();
      },
      bindEvents: function() {
          $('.project-img').hover(function() {
              var hovered = $(this);
              var thumbnailIndex = 0
              var thumbnailArray = hovered.children()
              console.log(thumbnailArray);
              var cycle = setInterval(function(){
                  thumbnailIndex++
                  if (thumbnailIndex === thumbnailArray.length) {
                      thumbnailIndex = 0;
                      thumbnailArray.removeClass('active');
                      thumbnailArray.eq(0).addClass('active');
                  } else {
                      var $visible = thumbnailArray.eq(thumbnailIndex);
                      thumbnailArray.removeClass('active');
                      $visible.addClass('active');
                  }
              }, 700);
          }, function() {
              clearInterval(cycle);
          });
      },
      setupImages: function() {
          var projectImage = $('.project-img');
          projectImage.each(function(project) {
              $(this).find('.project-thumbnail:eq(0)').addClass('active');
          });
      }
  }
  $(document).ready(function() {
      Image.init();
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.project-thumbnail {
      visibility: hidden;
      display: none;
  }
  .active {
      visibility: visible;
      display: block;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;div class="project-img"&gt;
      &lt;div class="project-thumbnail"&gt;
          &lt;img src="http://via.placeholder.com/250/000000"&gt;
      &lt;/div&gt;
      &lt;div class="project-thumbnail"&gt;
          &lt;img src="http://via.placeholder.com/250/ffffff/000000"&gt;
      &lt;/div&gt;
      &lt;div class="project-thumbnail"&gt;
          &lt;img src="http://via.placeholder.com/250/000000"&gt;
      &lt;/div&gt;
      &lt;div class="project-thumbnail"&gt;
          &lt;img src="http://via.placeholder.com/250/ffffff/000000"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="project-img"&gt;
      &lt;div class="project-thumbnail"&gt;
          &lt;img src="http://via.placeholder.com/250/ffffff/000000"&gt;
      &lt;/div&gt;
      &lt;div class="project-thumbnail"&gt;
          &lt;img src="http://via.placeholder.com/250/000000"&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>