在mouseleave上调用clearInterval

Question

我正在尝试使用setInterval创建一个图片幻灯片，当鼠标悬停在.project-img时开始播放，当鼠标离开.project-img时暂停播放。我遇到的问题是当鼠标离开时调用清除间隔以暂停幻灯片显示，我当前收到错误：

Uncaught ReferenceError: cycle is not defined

我哪里错了？

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

这是一个范围问题，你已经在一个函数中定义了循环，所以它不能离开。将var cycle置于var Image之上，您的问题就会得到解决！或者，如果您希望将其范围保留在Image var中，则可以将cycle替换为Image.cycle，这也可以。

Answer 2

变量cycle的范围不同。而不是使用hover使用each，在cycle的外部范围内声明hover变量，如下所示：

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>