j Frage Slider Timing funktioniert nicht gut

Question

Ich arbeite auf einem Abfrage-Slider, die Folie automatische Änderung funktioniert gut, aber wenn ich die "nächste" oder "vorherige" drücken, wird nicht zurückgesetzt die Folie Zeit ändern, so manchmal es geht zum nächsten Slider, nur um ihn in sehr kurzer Zeit abspielen und ändern zu lassen. Wie kann ich es reparieren?

var slider = $('.slides img'); 
slider.hide(); 
slider.eq(0).show(); 
clickCount = 0;  

//autoplay 

$(document).ready(function(){ 
    setInterval(function(){$(".SlNextBT").click();},6000); 
}) ; 

//next 

$(".SlNextBT").click(function(){ 
    if(clickCount < slider.length) 
      slider.eq(clickCount++).fadeOut(2100).hide(); 
    if(clickCount == slider.length) 
     clickCount = 0; 
     slider.eq(clickCount).fadeIn(2100).show(); 
}) ; 

//previous 

    $(".SlPreviousBT").click(function(){ 
     if(clickCount >= 0) 
       slider.eq(clickCount--).fadeOut(2100).hide();     
     if(clickCount < 0) 
      clickCount = slider.length-1; 
      slider.eq(clickCount).fadeIn(2100).show(); 
     console.log(clickCount); 
    }) ; 

Answer 1

Sie müssen Intervall zurücksetzen

var slider = $('.slides img'); 
    var intervalHandler = null; 
    slider.hide(); 
    slider.eq(0).show(); 
    clickCount = 0;  

    //autoplay 

    $(document).ready(function(){ 
     intervalHandler = setInterval(function(){$(".SlNextBT").click();},6000); 
    }) ; 

    //next 

    $(".SlNextBT").click(function(){ 
      clearInterval(intervalHandler); 
      intervalHandler = setInterval(function(){$(".SlNextBT").click();},6000); 
     if(clickCount < slider.length) 
       slider.eq(clickCount++).fadeOut(2100).hide(); 
     if(clickCount == slider.length) 
      clickCount = 0; 
      slider.eq(clickCount).fadeIn(2100).show(); 
    }) ; 

    //previous 

     $(".SlPreviousBT").click(function(){ 
      clearInterval(intervalHandler); 
      intervalHandler = setInterval(function(){$(".SlNextBT").click();},6000); 
      if(clickCount >= 0) 
        slider.eq(clickCount--).fadeOut(2100).hide();     
      if(clickCount < 0) 
       clickCount = slider.length-1; 
       slider.eq(clickCount).fadeIn(2100).show(); 
      console.log(clickCount); 
     }) ; 

Ein kleines Beispiel:

var intHandler = null; 
 
var nxt = null; 
 
var prv = null; 
 
$(document).ready(function() { 
 
     nxt = $('.next'); 
 
     prv = $('.prev'); 
 
     intHandler = setInterval(function() { 
 
     nxt.click() 
 
     }, 4000); 
 
     nxt.click(function() { 
 
     alert("Hello"); 
 
     clearInterval(intHandler); 
 
     intHandler = setInterval(function() { 
 
      nxt.click() 
 
     }, 4000); 
 
     }); 
 
     prv.click(function() { 
 
     $('.log').append("Resseted timer"); 
 
     clearInterval(intHandler); 
 
     intHandler = setInterval(function(){nxt.click()},4000); 
 
    }); 
 

 
});

button { 
 
    width: 50px; 
 
    height: 25px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="next">NEXT</button> 
 
<button class="prev">PREV</button> 
 
<div class='log'> 
 

 
</div>

Klicken Sie zurück und Sie werden erst nach Ihnen als nächstes es Alarm sehen aufhören zu drücken und 4 Sekunden vergeht