снова через 5 секунд после нажатия кнопки clearInterval - PullRequest
Новая
       5

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

3 голосов
/ 27 января 2012

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

1 Ответ

7 голосов
/ 27 января 2012

Поместите 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
}
...