javascript - 在两个函数之间传递变量

Question

我使用这个简单的脚本来创建一些 slider ，该 slider 在 mouseenter 上启动，并在 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');

});

slider 启动得很好，但在 mouseleave 事件上我收到控制台错误“Uncaught ReferenceError:测试未定义”。我认为那是因为第二个函数中没有传递间隔变量。有什么解决办法吗？

Check out my CodePen! (这里工作正常)

Answer 1

在函数外部声明变量test

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');

});