setInterval on mouseenter and clear interval on mouseleave

Question

I'm using setInterval to create a diy slideshow that starts on mouseenter using this tutorial : https://www.amideveloper.com/how-to-start-slideshow-on-hover-image-in-jquery/

It works fine, but I would like the slideshow to stop on mouseleave by using clearInterval.

I don't know what I'm doing wrong has my Interval is not cleared and the slideshow won't stop...

here is my code :

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;
}

here's a link to a jsfidlle:

https://jsfiddle.net/0ysg3r67/

any help would be appreciated

Your fiddle is working as you describe for me (latest Chrome on Win10). Although I'd suggest declaring myVar explicitly in the right scope rather than implicitly making it a global. — Rory McCrossan
– Rory McCrossan, Commented Feb 17, 2020 at 16:33
The issue is that your logic around swapping out slides is causing the mouseenter to re-trigger, creating multiple intervals. — Taplar
– Taplar, Commented Feb 17, 2020 at 16:35
@Taplar which browser are you testing with? In Chrome I only get each console.log once (per event) in the following example: jsfiddle.net/RoryMcCrossan/Lpz746hq — Rory McCrossan
– Rory McCrossan, Commented Feb 17, 2020 at 16:37
@Taplar but the listener is set on the div containing the images. — Romi Halasz
– Romi Halasz, Commented Feb 17, 2020 at 16:38
@RoryMcCrossan Firefox, I added a console log to the mouseenter and leave, and hovered over the element. The start log fired every time the slide changes jsfiddle.net/h5vLteag/1 — Taplar
– Taplar, Commented Feb 17, 2020 at 16:38

Taplar · Accepted Answer · 2020-02-17 17:06:21Z

2

var myVar;

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

Something with your slide transitions is causing the mouseenter to retrigger, creating multiple intervals. To safeguard against this, attempt to clear the interval before creating a new one.

As an alternative, instead of moving around slides, you can simply tag the one that is visible, and use that to know which slide should be shown next. This appears to resolve the issue with Firefox triggering the mouseenter over and over.

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>

edited Feb 17, 2020 at 17:06

answered Feb 17, 2020 at 16:38

Taplar

25k4 gold badges24 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Taplar Over a year ago

Nothing wrong with trying to clear an interval before making a new one. Especially when you are overlaying the variable that points to the old one.

mmdwc Over a year ago

sure I know, I get it... but I don't understand why it doesn't work right on firefox...

Taplar Over a year ago

Most likely the .appendTo(".fadeInOut") is the cause, as that operation is going to detach the element and reattach it to the same element. For some reason, Firefox is considering that to trigger the mouseenter event again, and Chrome is not.

Taplar Over a year ago

@mmdwc that does indeed appear to be the root issue. I've added a snippet with a modified way of performing the slides, that does not re-trigger the event in Firefox.

Collectives™ on Stack Overflow

setInterval on mouseenter and clear interval on mouseleave

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related