How do I reset the setInterval on click?

Question

I want to move the class="active" after an interval of 3 sec as well as on click of the class="left" & class="right" to next and previous sibling accordingly. But each time i click on <a> the interval should reset to 0 so that it should count to 3 sec.

But in my case it doesn't reset.

My HTML:

<a class="left" href="#main_slider" data-slide="prev">      
</a>
<a class="right" href="#main_slider" data-slide="next">      
</a>  

<div id="outer-div">
  <div class=" headings active"> 
      <h1>Boswelya</h1>
      <h2>plus</h2> 
  </div>
  <div class="headings ">
     <h1>abcd</h1>
     <h2>plus2</h2>
  </div>
</div>

My JavaScript:

setInterval(function(){
    var active = jQuery("#outer-div .active").removeClass('active');

    if(active.next() && active.next().length){
        active .next().addClass('active');
    } else {
        active.siblings(":first").addClass('active');
    }
}, 3000)

jQuery(".left").click(function() {
    var active = jQuery("#outer-div .active").removeClass('active');

    if(active.prev() ){
        active.prev().addClass('active');
    } else {
        active.siblings(":last").addClass('active');
    }    
});

jQuery(".right").click(function() {
    var active = jQuery("#outer-div .active").removeClass('active');

    if(active .next() && active.next().length){
        active .next().addClass('active');
    } else {
        active.siblings(":first").addClass('active');
    }
});

2

By using `clearInterval()`? – j08691 May 26 '15 at 17:34

score 0 · Answer 1 · answered May 26 '15 at 17:37

you need to use clearInterval();

var int = setInterval(function(){
        var active = jQuery("#outer-div .active").removeClass('active');

        if(active.next() && active.next().length){
            active .next().addClass('active');
        } else {
            active.siblings(":first").addClass('active');
        }
    }, 3000)

    jQuery(".left").click(function() {
        clearInterval(int);
        var active = jQuery("#outer-div .active").removeClass('active');

        if(active.prev() ){
            active.prev().addClass('active');
        } else {
            active.siblings(":last").addClass('active');
        }    
    });

    jQuery(".right").click(function() {
       clearInterval(int);
        var active = jQuery("#outer-div .active").removeClass('active');

        if(active .next() && active.next().length){
            active .next().addClass('active');
        } else {
            active.siblings(":first").addClass('active');
        }
    });

then it setInterval doesn't work at all after the click – Rahul Sharma May 26 '15 at 17:46 — Rahul Sharma, May 26 '15 at 17:46

How do I reset the setInterval on click?

My HTML:

My JavaScript:

1 Answers1