Как вызвать метод clearInterval() из одной функции, чтобы остановить метод setInterval() в другом

99
5

поэтому я в основном создаю слайд-шоу с использованием некоторого базового кросс-затухания ниже, это сценарий, который я использую в настоящее время

Автор сценария:

  $(document).ready(function(){
var slide = function(){
var active = $('.active');
var next = (active.next().length > 0) ? active.next() : $('#slide:first');
next.css('z-index',2);
active.fadeOut(1000,function(){// fade out the active image
active.css('z-index',1).show().removeClass('active');
next.css('z-index',3).addClass('active');
});
}
setInterval(slide,2000)
});

Как вы можете видеть, приведенный выше скрипт перекрестно затухает список изображений каждые 2 секунды. Теперь я хочу, чтобы остановить слайд-шоу (например, использовать clearInterval(Interval id)), когда пользователь нажимает либо на previous image кнопку previous image, либо на next image кнопку next image, но доцент, похоже, работает. Я попробовал примеры из w3schools.com и т.д., но безрезультатно

Обновить

Полный скрипт в случае каких-либо сомнений

  $(document).ready(function(){
var slide = function(){
var active = $('.active');
var next = (active.next().length > 0) ? active.next() : $('#slide:first');
next.css('z-index',2);
active.fadeOut(1000,function(){// fade out the active image
active.css('z-index',1).show().removeClass('active');
next.css('z-index',3).addClass('active');
});
}
setInterval(slide,2000)
});

//------------on click of next or prev-------
//next
$(".next").click(function(){
window.clearInterval(slide_timer);//stop the auto slide

var active = $('.active');
var next = (active.next().length > 0) ? active.next() : $('#slide:first');
next.css('z-index',2);
active.fadeOut(1000,function(){// fade out the active image
active.css('z-index',1).show().removeClass('active');
next.css('z-index',3).addClass('active');
});
});
//prev will be the same as next as soon as the stopping slide show problem is solved

спросил(а) 2021-01-19T18:44:50+03:00 6 месяцев, 1 неделя назад
1
Решение
109

вытащите ссылку на интервал на более высокий уровень охвата.


var slideTimer;

function triggerTimer(){
slideTimer = setInterval(slide,2000);
}

function cancelTimer(){
clearInterval(slideTimer);
}

ответил(а) 2021-01-19T18:44:50+03:00 6 месяцев, 1 неделя назад
45

Вы можете использовать этот пример для реализации своих возможностей.

var interval;
$('#stop').click(function(){
clearInterval(interval);
});

var slide = function(){
alert("testing setInterval");
}

interval = setInterval(slide,2000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="stop">stop interval</button>

ответил(а) 2021-01-19T18:44:50+03:00 6 месяцев, 1 неделя назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема