如何在点击时重置setInterval？

Question

我希望在3秒的间隔后移动class="active"以及点击class="left"＆amp; class="right"相应的下一个和上一个兄弟姐妹。 但是每次我点击<a>时，间隔应重置为0，以便它应该计为3秒。

但在我的情况下，它不会重置。

我的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>

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

Answer 1

  

你需要使用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');
        }
    });