Проблемы запуска и остановки setInterval

Question

Проблемы запуска и остановки setInterval

0

Я пытаюсь использовать setInterval для запуска, остановки и перезапуска установленного слайдера. Ползунок 1) исчезает/на слайде, 2) переводит пейджинговые кнопки в нижней части слайдера. Мой код выглядит следующим образом:

var sliderEl = $('div.slider-container'),
    pagerNav = $('div.slider-container div.pager-container nav.pager'),
    slidePosition = 1,
    slideCount = sliderEl.find('img.slide').length,
    sliderInt;

var slider = function(status){
    var nextSlide = function(){
        pagerNav.find('button.slide-select').removeClass('selected');
        sliderEl.find('div.slides div.slide').fadeOut(300);
        if(slidePosition === slideCount){
            pagerNav.find('button.slide-select[id=p0]').addClass('selected');
            sliderEl.find('div.slides div.slide[id=s0]').fadeIn(300);
            slidePosition = 1;
        } else {
            sliderEl.find('div.slides div.slide[id=s'+slidePosition+']').fadeIn(300);
            pagerNav.find('button.slide-select[id=p'+slidePosition+']').addClass('selected');
            slidePosition++;
        }
    }

    if(status === 'start') {
        sliderInt = setInterval(nextSlide, 2000);
    } else if(status === 'next') {
        nextSlide();
    }

    sliderEl.find('div.slider').hover(function(){
        clearInterval(sliderInt);
        sliderEl.find('button.slide-next').on('click',function(){
            slider('next');
        });
    },function() {
        slider('start');
    });
}

slider('start');

Ползунок начинается, и setInterval работает нормально; проблема, с которой я сталкиваюсь, - это когда я наводил курсор на слайд, чтобы "приостановить" его (что также работает), а затем я выхожу, чтобы запустить его снова... ползунок удваивается и начинает прыгать на следующий слайд в два раза скорость.

Может кто-нибудь помочь?

Jody Heavener 02 дек. 2013, в 01:25

Источник

0

Перед вызовом clearInterval(sliderInt) не могли бы вы сделать console.log(sliderInt) и посмотреть, действительно ли объект назначен?
SquareCat 02 дек. 2013, в 00:01
0

Странно, когда я сделал это, он вывел случайное число от 15 до 30, а затем, когда я включил и снова включил, он сделал то же самое, но X2. Почему это?
Jody Heavener 02 дек. 2013, в 00:06
0

sliderInt вернул число? Стоит вернуть ссылку на интервал, нет? Я думаю, что это пустой след, но ведет ли он себя по-разному, если вместо этого вы вызываете window.setInterval() и window.clearInterval() ?
SquareCat 02 дек. 2013, в 00:08

Показать ещё 1 комментарий

Теги:

jquery

slider

setinterval

1 ответ

Ещё вопросы

Перед вызовом clearInterval(sliderInt) не могли бы вы сделать console.log(sliderInt) и посмотреть, действительно ли объект назначен?
Странно, когда я сделал это, он вывел случайное число от 15 до 30, а затем, когда я включил и снова включил, он сделал то же самое, но X2. Почему это?
sliderInt вернул число? Стоит вернуть ссылку на интервал, нет? Я думаю, что это пустой след, но ведет ли он себя по-разному, если вместо этого вы вызываете window.setInterval() и window.clearInterval() ?

Tony · Accepted Answer · 2013-12-01T23-05-00.000Z

Джоди, я вижу, по крайней мере, одну проблему с вашим кодом: каждый раз, когда вы вызываете свою функцию, добавляется новый обработчик hover. Послушай, ты вызвал слайдер func и один hover обработчик прилагается. Затем вы перемещаете мышь над элементом и перемещаете его, тогда функция слайдера будет вызвана снова, и новый обработчик hover будет прикреплен. Теперь есть 2 обработчика. Поэтому, когда в следующий раз вы сделаете это снова, будут вызваны 2 hanlders, и этот код будет вызываться дважды:

sliderInt = setInterval(nextSlide, 2000);

Мое предложение состоит в том, чтобы переместить код инициализации, чтобы отделить команду и добавить проверку для двойного вызова "start". Как это:

if (sliderInt) clearInterval(sliderInt);

И все это решение:

var slider = function(status) {

var nextSlide = function(){
    pagerNav.find('button.slide-select').removeClass('selected');
    sliderEl.find('div.slides div.slide').fadeOut(300);
    if(slidePosition === slideCount){
        pagerNav.find('button.slide-select[id=p0]').addClass('selected');
        sliderEl.find('div.slides div.slide[id=s0]').fadeIn(300);
        slidePosition = 1;
    } else {
        sliderEl.find('div.slides div.slide[id=s'+slidePosition+']').fadeIn(300);
        pagerNav.find('button.slide-select[id=p'+slidePosition+']').addClass('selected');
        slidePosition++;
    }
}

if(status === 'start') {
    if (sliderInt) 
         clearInterval(sliderInt);
    sliderInt = setInterval(nextSlide, 2000);
} else if(status === 'next') {
    nextSlide();
} else if (status === 'init') {

    sliderEl.find('div.slider').hover(function(){
        clearInterval(sliderInt);
        sliderInt = null;           

        sliderEl.find('button.slide-next').on('click',function(){
            slider('next');
        });
    },function() {
        slider('start');
    });
}

}

И вы должны вызвать init где-то всего один раз:

slider('init');

И затем начните

slider('start');

Надеюсь, что это поможет вам.