在两个函数之间传递变量

Question

I'm using this simple script to create some slider which is starting on mouseenter and which should stops on mouseleave:

$( ".grid-item" ).mouseenter(function() {

  var slides = $(this).find( ".slide-image" ), 
      counter = 0;

  var test = setInterval(function(){
  slides.removeClass('active');
  slides.eq(counter).addClass('active');
  counter++;

  if (counter > slides.length) {counter = 0;};
  }, 600);

}).mouseleave(function() {

  clearInterval(test);
  // $( ".slide-image" ).removeClass('active');

});

The Slider starts quite fine but on the mouseleave-event I'm getting the console error "Uncaught ReferenceError: test is not defined" . I think thats because the variable of the interval is not delivered in the second function. Is there any solution?

Check out my CodePen! (It works fine here)

Answer 1

Declare your variable test outside the function

var test;
$( ".grid-item" ).mouseenter(function() {

  var slides = $(this).find( ".slide-image" ), 
      counter = 0;

  test = setInterval(function(){
  slides.removeClass('active');
  slides.eq(counter).addClass('active');
  counter++;

  if (counter > slides.length) {counter = 0;};
  }, 600);

}).mouseleave(function() {

  clearInterval(test);
  // $( ".slide-image" ).removeClass('active');

});