mouseenter 上的 setInterval 和 mouseleave 上的 clear interval

Question

我正在使用 setInterval 创建一个在 mouseenter 上开始的 diy 幻灯片，使用本教程： https://www.amideveloper.com/how-to-start-slideshow-on-hover-image-in-jquery/

效果很好，但我希望使用 clearInterval 使幻灯片在鼠标离开时停止。

我不知道我做错了什么我的间隔没有被清除并且幻灯片不会停止...

这是我的代码：

JQUERY

$(".fadeInOut > div:gt(0)").hide();

function change_div() {

  $(".fadeInOut > div:first").fadeOut(0).next().fadeIn(0).end().appendTo(".fadeInOut");

}

$(".fadeInOut").mouseenter(function(){

    myVar = setInterval(change_div, 600);
  change_div();

});

$(".fadeInOut").mouseleave(function(){

  clearInterval(myVar);

});

HTML

<div class="fadeInOut">
    <div><img src="https://www.amideveloper.com/wp-content/themes/amideveloper/slide/slider-1.jpg"></div>
    <div><img src="https://www.amideveloper.com/wp-content/themes/amideveloper/slide/slider-2.jpg"></div>
    <div><img src="https://www.amideveloper.com/wp-content/themes/amideveloper/slide/slider-3.jpg"></div>
</div>

CSS

.fadeInOut > div {
    position: absolute;
}

这里有一个 link 到 jsfidlle:

https://jsfiddle.net/0ysg3r67/

任何帮助将不胜感激

Answer 1

var myVar;

$(".fadeInOut").mouseenter(function(){
  clearInterval(myVar);
  myVar = setInterval(change_div, 600);
  change_div();
});

您的幻灯片切换导致鼠标输入重新触发，从而创建多个间隔。为防止这种情况，请尝试在创建新间隔之前清除间隔。

作为替代方案，您可以简单地标记可见的幻灯片，而不是在幻灯片中移动，并使用它来知道接下来应该显示哪张幻灯片。这似乎解决了 Firefox 反复触发鼠标输入的问题。

var myVar;
var $slides = $('.fadeInOut > div');

$(".fadeInOut > div:not(.current)").hide();

function change_div() {
 var $current = $slides.filter('.current');
  var $next = ($current.next().length ? $current.next() : $slides.first());
  
  $current.fadeOut(0).removeClass('current');
  $next.addClass('current').fadeIn(0);
}

$(".fadeInOut").mouseenter(function(){
 console.log('start');

 myVar = setInterval(change_div, 600);
  change_div();

});

$(".fadeInOut").mouseleave(function(){
  console.log('stop');
  clearInterval(myVar);

});

.fadeInOut > div {
    position: absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="fadeInOut">
 <div class="current"><img src="https://www.amideveloper.com/wp-content/themes/amideveloper/slide/slider-1.jpg"></div>
 <div><img src="https://www.amideveloper.com/wp-content/themes/amideveloper/slide/slider-2.jpg"></div>
 <div><img src="https://www.amideveloper.com/wp-content/themes/amideveloper/slide/slider-3.jpg"></div>
</div>

mouseenter 上的 setInterval 和 mouseleave 上的 clear interval

setInterval on mouseenter and clear interval on mouseleave

jquery

mouseenter

mouseleave

setinterval

clearinterval