在两个函数之间传递变量

Question

我正在使用这个简单的脚本来创建一些滑块，它在 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: test is not defined"。我认为那是因为间隔的变量没有在第二个函数中传递。有什么解决办法吗？

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

});

在两个函数之间传递变量

Deliver variable between two functions

javascript

jquery

variables

mouseevent

clearinterval