setInterval при вводе мыши и очистке интервала при выходе из мыши

Я использую setInterval для создания самодельного слайд-шоу, которое запускается при вводе мыши, используя этот учебник: 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;
}

вот ссылка на jsfidlle:

https://jsfiddle.net/0ysg3r67/

любая помощь будет оценена


jquery setinterval clearinterval mouseenter mouseleave
person mmdwc    schedule 17.02.2020    source источник
comment
Ваша скрипка работает так, как вы описываете для меня (последний Chrome на Win10). Хотя я бы предложил явно объявить myVar в нужной области, а не неявно делать его глобальным.   -  person Rory McCrossan    schedule 17.02.2020
comment
Проблема в том, что ваша логика замены слайдов приводит к повторному срабатыванию mouseenter, создавая несколько интервалов.   -  person Taplar    schedule 17.02.2020
comment
@Taplar, какой браузер вы тестируете? В Chrome я получаю каждый console.log только один раз (для каждого события) в следующем примере: jsfiddle.net/RoryMcCrossan/ Lpz746hq   -  person Rory McCrossan    schedule 17.02.2020
comment
@Taplar, но слушатель настроен на div, содержащий изображения.   -  person Romi Halasz    schedule 17.02.2020
comment
@RoryMcCrossan Firefox, я добавил журнал консоли для ввода и вывода мыши и навел курсор на элемент. Стартовый журнал запускается каждый раз при изменении слайда jsfiddle.net/h5vLteag/1.   -  person Taplar    schedule 17.02.2020
comment
Однако я согласен, что эта проблема не существует в Chrome.   -  person Taplar    schedule 17.02.2020
comment
@Taplar, ты прав, я использую Firefox... в Chrome все работает нормально... есть предложения?   -  person mmdwc    schedule 17.02.2020

Ответы (1)


arrow_upward
2
arrow_downward 

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>

person Taplar    schedule 17.02.2020
comment
Нет ничего плохого в том, чтобы попытаться очистить интервал перед созданием нового. Особенно, когда вы накладываете переменную, указывающую на старую. - person Taplar; 17.02.2020
comment
конечно, я знаю, я понимаю... но я не понимаю, почему это не работает в firefox... - person mmdwc; 17.02.2020
comment
Скорее всего, причиной является .appendTo(".fadeInOut"), так как эта операция будет отсоединять элемент и повторно присоединять его к тому же элементу. По какой-то причине Firefox рассматривает возможность повторного запуска события mouseenter, а Chrome — нет. - person Taplar; 17.02.2020
comment
@mmdwc, который действительно является основной проблемой. Я добавил фрагмент с измененным способом выполнения слайдов, который не вызывает повторного запуска события в Firefox. - person Taplar; 17.02.2020