javascript - 让 clearInterval 真正清除的问题

Question

我正在尝试创建一个在 jQuery 悬停事件上激活的渐变幻灯片。我的代码是这样的:

var myObj = null;
$('selector').hover(function() {
   // Code to retrieve the image URLs via ajax and construct the slideshow html 
   myObj = setInterval(playMe, 3000);
}, function() {
   clearInterval(myObj);
   myObj = null;
})

var playMe = function() {
   // this just changes the class of each images container, which changes the 
   // opacity from 0 to 1. The fade animation is done using css3 and a transition
}

我遇到的问题是 clearInterval 并不总是清除，尤其是当您在屏幕上快速移动光标时，从而触发快速的鼠标悬停/鼠标移开事件。这会搞砸时间安排，因为我怀疑有多个 playMe 正在运行。

这附近有没有？一种真正确保只有一个 playMe/setInterval 运行的方法？

提前致谢。

Answer 1

您可以在分配 setInterval 之前检查 myObj 是否为 null。这样，只有一个 setInterval 可以运行。

$(function(){
var myObj = null;
$('div#fadeinout').hover(function() {
   // Code to retrieve the image URLs via ajax and construct the slideshow html 
   if(myObj===null){
   myObj = setInterval(playMe, 3000);
   }
}, function() {
   if(myObj){
   clearInterval(myObj);
   myObj = null;
   }
})

var playMe = function() {
   // this just changes the class of each images container, which changes the 
   $('div#fadeinout').toggleClass('fade');
   // opacity from 0 to 1. The fade animation is done using css3 and a transition
}
});

div#fadeinout{
  margin: auto;
  width: 50%;
  height: 200px;
  border: 1px solid black;
  background-color: dodgerblue;
  transition: opacity 1.5s;
}
.fade{
  opacity: 0.25;
}

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