setInterval снова через 5 секунд после кнопки clearInterval

Я делаю слайдер содержимого, который автоматически циклически переключает слайды (периодически вызывая «следующую» функцию с помощью 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); 
}

javascript jquery setinterval clearinterval
person gabmadrid    schedule 27.01.2012    source источник

Ответы (1)


arrow_upward
8
arrow_downward

Поместите свой 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
}
person nnnnnn    schedule 27.01.2012
comment
Хороший! Оно работает! Спасибо! Просто нужно было привязать stopCycle() к $stopTriggers, добавив $stopTriggers.bind('click.cycle', stopCycle);, и тогда мне было хорошо! Спасибо за помощь! - person gabmadrid; 27.01.2012