Troubles starting and stopping setInterval

I am trying to usesetIntervalto start, stop, and restart a timed slider. The slider 1) fades out/in the slide, 2) transitions pager buttons at the bottom of the slider. My code is as follows:

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');

The slider starts and the setInterval works just fine; the problem I'm having is when I hover over the slide to "pause" it (which also works) and then I mouse out to start it again... the slider interval doubles up and starts jumping to the next slide at twice the speed.

Can someone help?

Jody, I see at least one problem with your code: every time you call your function a new hover handler is added. Look, you called slider func and one hover handler is attached. Then you move mouse over element and move it out then slider func will be called again and new hover handler attached. Now there are 2 handlers. So when next time you will do it again 2 hanlders will be called and this code will be called twice too:

sliderInt = setInterval(nextSlide, 2000);

My suggestion is to move initialization code to separate command and add checking for double 'start' calling. Like this:

if (sliderInt) clearInterval(sliderInt);

And the whole solution is:

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');
    });
}

}

And you should call init somewhere just one time:

slider('init');

And then start

slider('start');

Hope this will help you.

What Others Are Reading