setInterval снова через 5 секунд после кнопки ClearInterval
-
14-11-2019 - |
Вопрос
Я делаю слайдер контента, который автоматически переключает слайды (периодически вызывая функцию «следующий» с помощью setInterval
), но останавливается, когда пользователь нажимает кнопки «Предыдущий/Следующий» (с помощью clearInterval
на кнопках «Предыдущий/Следующий»).Есть ли способ использовать setInterval
снова через несколько секунд нажатия кнопки?
Код:
// start to automatically cycle slides
var cycleTimer = setInterval(function () {
$scroll.trigger('next');
}, 450);
// set next/previous buttons as clearInterval triggers
var $stopTriggers = $('img.right').add('img.left'); // left right
// function to stop auto-cycle
function stopCycle() {
clearInterval(cycleTimer);
}
Решение
Положите вашу setInterval
в функции, а затем вызвать эту функцию с помощью setTimeout()
.
Разница между setInterval()
и setTimeout()
в том, что setInterval()
вызывает вашу функцию несколько раз через каждый интервал, в то время как setTimeout()
вызывает вашу функцию только один раз после указанной задержки.
В приведенном ниже коде я добавил функцию startCycle()
.Вызовите эту функцию, чтобы запустить цикл, как немедленно, чтобы он запускался автоматически, так и по истечении времени ожидания, установленного в вашем существующем stopCycle()
функция.
var cycleTimer;
function startCycle() {
cycleTimer = setInterval(function () {
$scroll.trigger('next');
}, 450);
}
// start to automatically cycle slides
startCycle();
// set next/previous buttons as clearInterval triggers
var $stopTriggers = $('img.right').add('img.left'); // left right
// function to stop auto-cycle
function stopCycle() {
clearInterval(cycleTimer);
setTimeout(startCycle, 5000); // restart after 5 seconds
}