call clearInterval on mouseleave

Question

I'm trying to create an image slideshow with setInterval which starts playing when the mouse is over .project-img and pauses when the mouse leaves .project-img. The problem i'm having is calling clear interval on to pause the slideshow when the mouse leaves, I'm currently receiving the error:

Uncaught ReferenceError: cycle is not defined

Where am I going wrong?

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

.project-thumbnail {
    visibility: hidden;
    display: none;
}
.active {
    visibility: visible;
    display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="project-img">
    <div class="project-thumbnail">
        <img src="http://via.placeholder.com/250/000000">
    </div>
    <div class="project-thumbnail">
        <img src="http://via.placeholder.com/250/ffffff/000000">
    </div>
    <div class="project-thumbnail">
        <img src="http://via.placeholder.com/250/000000">
    </div>
    <div class="project-thumbnail">
        <img src="http://via.placeholder.com/250/ffffff/000000">
    </div>
</div>

<div class="project-img">
    <div class="project-thumbnail">
        <img src="http://via.placeholder.com/250/ffffff/000000">
    </div>
    <div class="project-thumbnail">
        <img src="http://via.placeholder.com/250/000000">
    </div>
</div>

Answer 1

The variable cycle is in a different scope. Instead of using hover use each, declaring the cycle variable in an outer scope of hover like so:

var Image = {
  init: function() {
    Image.setupImages();
    Image.bindEvents();
  },
  bindEvents: function() {
    $('.project-img').each(function() {
      var hovered = $(this);
      var cycle;
      hovered.hover(function() {
        var thumbnailIndex = 0;
        var thumbnailArray = hovered.children();
        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();
});

.project-thumbnail {
  visibility: hidden;
  display: none;
}

.active {
  visibility: visible;
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="project-img">
  <div class="project-thumbnail">
    <img src="http://via.placeholder.com/250/000000">
  </div>
  <div class="project-thumbnail">
    <img src="http://via.placeholder.com/250/ffffff/000000">
  </div>
  <div class="project-thumbnail">
    <img src="http://via.placeholder.com/250/000000">
  </div>
  <div class="project-thumbnail">
    <img src="http://via.placeholder.com/250/ffffff/000000">
  </div>
</div>

<div class="project-img">
  <div class="project-thumbnail">
    <img src="http://via.placeholder.com/250/ffffff/000000">
  </div>
  <div class="project-thumbnail">
    <img src="http://via.placeholder.com/250/000000">
  </div>
</div>

Answer 2

This is a scope issue, you have defined cycle within a function, so it can't leave. Put var cycle above var Image and your problems will be solved! Alternatively if you wanted to keep it scoped inside the Image var, you can replace cycle with Image.cycle and that will also work.