How to stop a setInterval function on click, and restart after a few seconds

Question

I have an issue in my custom slider: I want to stop a setInterval event on click of the next/back buttons, and restart after 3 seconds.

The slider: http://karanbhilware.com/mail_send/slider.html

The interval code follows.

HTML:

<div class="slider">
  <div id="sliderUL"> <img src="images/1.jpg" /> <img src="images/2.jpg" /> <img src="images/3.jpg" /> <img src="images/4.jpg" /> <img src="images/5.jpg" /> </div>
</div>
<div style="clear:both">&nbsp;</div>
<div id="sliderNav">
  <button id="back" data-file="previous" style="float:left; margin-left:50px;">previous</button>
  <button id="next" data-file="next" style="float:right; margin-right:50px;">Next</button>
</div>

JavaScript:

var sliderWrap = $('#sliderUL'),
    img = $('#sliderUL img')
    singleWidth = sliderWrap.find('img:first-child').width(),
    imageLenght = img.length,
    idCount = 1,
    current = 1,
    firstImage = img.first();
    lastImage = img.last(),
    secondLast = imageLenght-1;
    secondImage = img.eq(1);
    firstImage.addClass('active');

img.each(function(){
    $(this).attr('id','slider_'+idCount++);
});

if(current === 1){
    $('#back').addClass('none');
}

$('#next').on('click',nextFun);
$('#back').on('click',backFun);
function backFun(){
    if(current === imageLenght){
        $('#next').removeClass('none');
    }
    if(current === 2){
        $(this).addClass('none');
    }

    var backNextSlider = sliderWrap.find('img[id="slider_'+(current-1)+'"]').addClass('active').removeClass('Subactive');
    sliderWrap.find('img[id="slider_'+(current)+'"]').removeClass('Subactive').addClass('backActive').removeClass('active');
    current--;
}       
function nextFun(){
    var currentNextSlider = sliderWrap.find('img[id="slider_'+(current+1)+'"]').addClass('active').removeClass('backActive');
    sliderWrap.find('img[id="slider_'+(current)+'"]').addClass('Subactive').removeClass('backActive, active');
    current++;
    if(current === 2){
        $('#back').removeClass('none');
    }
    if(current === imageLenght){
        $('#next').addClass('none');
    }
}       

var mode = 'Next';
function autRotatae(){
    if(current == imageLenght)
        mode = 'Back';
        if(current == 1)
            mode = 'Next';      
        if(mode == 'Next')
        {
            nextFun();
        }   
    else
        backFun();
}

$(document).ready(function(){
    setInterval(autRotatae,2000);   
})

Answer 1

You can't "pause" an interval. You can cancel and restart it.

Move interval creation and pausing to separate functions, so you don't repeat yourself:

var rotateInt = null;

$(document).ready(function(){
  startRotate();
})

function startRotate() {
  if (! rotateInt)
    rotateInt = setInterval(autRotatae, 2000);   
}

function pauseRotate() {
  if (rotateInt)
  {
    clearInterval( rotateInt );
    rotateInt = null;

    setTimeout( startRotate, 3000 );
  }
}

then, in your next/prev button handlers:

pauseRotate();

Answer 2

var timer;
var sliderWrap = $('#sliderUL'),
    img = $('#sliderUL img')
    singleWidth = sliderWrap.find('img:first-child').width(),
    imageLenght = img.length,
    idCount = 1,
    current = 1,
    firstImage = img.first();
    lastImage = img.last(),
    secondLast = imageLenght-1;
    secondImage = img.eq(1);
    firstImage.addClass('active');

    img.each(function(){
        $(this).attr('id','slider_'+idCount++);
    });

    if(current === 1){
        $('#back').addClass('none');
    }

    $('#next').on('click',nextFun);
    $('#back').on('click',backFun);
    function backFun(){
clearInterval(timer);
setTimeout(function(){ timer = setInterval(autRotatae,2000);},3000);
        if(current === imageLenght){
            $('#next').removeClass('none');
        }
        if(current === 2){
            $(this).addClass('none');
        }

        var backNextSlider = sliderWrap.find('img[id="slider_'+(current-1)+'"]').addClass('active').removeClass('Subactive');
        sliderWrap.find('img[id="slider_'+(current)+'"]').removeClass('Subactive').addClass('backActive').removeClass('active');
        current--;
    }       
    function nextFun(){
clearInterval(timer);
setTimeout(function(){ timer = setInterval(autRotatae,2000);   },3000);
        var currentNextSlider = sliderWrap.find('img[id="slider_'+(current+1)+'"]').addClass('active').removeClass('backActive');
        sliderWrap.find('img[id="slider_'+(current)+'"]').addClass('Subactive').removeClass('backActive, active');
        current++;
        if(current === 2){
            $('#back').removeClass('none');
        }
        if(current === imageLenght){
            $('#next').addClass('none');
        }
    }       
        var mode = 'Next';
        function autRotatae(){
            if(current == imageLenght)
                mode = 'Back';
                if(current == 1)
                    mode = 'Next';      
                if(mode == 'Next')
                {
                    nextFun();
                }   
            else
                backFun();
        }
        $(document).ready(function(){
            timer = setInterval(autRotatae,2000);   
        })