Kann den Wert einer Variablen in JQuery-Funktion nicht ändern

Question

Ich habe ein Skript für einen Schieberegler geschrieben. In meinem Code definiere ich eine Variable mit dem Namen autoswitch mit dem Standardwert true und die Folien werden geändert, wenn autoswitch == true. Aber wenn ein Benutzer auf den Pfeil der Folie klickt, ändert sich autoswitch zu false. Mein Code ist folgende:

$(document).ready(function() { 
// Initiate variables 
var speed = 500; 
var autoswitch = true; 
var autoswitch_speed = 5000; 

// Add initial active class 
$('.slide').first().addClass('active'); 

// Hide all slides 
$('.slide').hide(); 

$('.slide').first().show(); 

$('#next').click(function() { 
    autoswitch = false; 
    $('.active').removeClass('active').addClass('oldActive'); 
    if($('.oldActive').is(':last-child')){ 
     $('.slide').first().addClass('active'); 
    } else{ 
     $('.oldActive').next().addClass('active'); 
    } 
    $('.oldActive').removeClass('oldActive'); 
    $('.slide').fadeOut(speed); 
    $('.active').fadeIn(speed); 
}); 
$('#prev').click(function() { 
    autoswitch = false; 
    $('.active').removeClass('active').addClass('oldActive'); 
    if($('.oldActive').is(':first-child')){ 
     $('.slide').last().addClass('active'); 
    } else{ 
     $('.oldActive').prev().addClass('active'); 
    } 
    $('.oldActive').removeClass('oldActive'); 
    $('.slide').fadeOut(speed); 
    $('.active').fadeIn(speed); 
}); 

if(autoswitch){ 
    setInterval(function() { 
     $('.active').removeClass('active').addClass('oldActive'); 
     if($('.oldActive').is(':last-child')){ 
      $('.slide').first().addClass('active'); 
     } else{ 
      $('.oldActive').next().addClass('active'); 
     } 
     $('.oldActive').removeClass('oldActive'); 
     $('.slide').fadeOut(speed); 
     $('.active').fadeIn(speed); 
    }, autoswitch_speed); 
} 
}); 

Ich habe zwei Schieber Pfeil und beide auf klicken, in der ersten Zeile der Funktion den Wert von autoswitch = false; ändern, aber dieser Trick funktioniert nicht und auch nach auf die Pfeile klicken, Folien wechseln automatisch! Wie kann ich mein Problem lösen?

Answer 1

Dies geschieht, weil Sie das Objekt setInterval bereits beim Laden der Seite erstellt haben. Sie müssen die timer object auf autoswitch = false

Sie Ihren Code auf autoswitch = false

clearInterval(refreshIntervalId); 

Answer 2

Problem zu

var refreshIntervalId = setInterval(function() { 
    $('.active').removeClass('active').addClass('oldActive'); 
    if($('.oldActive').is(':last-child')){ 
     $('.slide').first().addClass('active'); 
    } else{ 
     $('.oldActive').next().addClass('active'); 
    } 
    $('.oldActive').removeClass('oldActive'); 
    $('.slide').fadeOut(speed); 
    $('.active').fadeIn(speed); 
}, autoswitch_speed); 

Aufruf aktualisieren müssen löschen wird Sie die setInterval so zu stoppen, dass Sie begonnen haben, müssen Klicken Sie auf

ClearInterval auf Pfeil klicken Versuchen Sie unten Code es sollte für Sie arbeiten

$(document).ready(function() { 
    // Initiate variables 
    var speed = 500; 
    var autoswitch = true; 
    var autoswitch_speed = 5000; 

    // Add initial active class 
    $('.slide').first().addClass('active'); 

    // Hide all slides 
    $('.slide').hide(); 

    $('.slide').first().show(); 

    $('#next').click(function() { 
     clearInterval(cleanVar); 
     $('.active').removeClass('active').addClass('oldActive'); 
     if($('.oldActive').is(':last-child')){ 
      $('.slide').first().addClass('active'); 
     } else{ 
      $('.oldActive').next().addClass('active'); 
     } 
     $('.oldActive').removeClass('oldActive'); 
     $('.slide').fadeOut(speed); 
     $('.active').fadeIn(speed); 
    }); 
    $('#prev').click(function() { 
     clearInterval(cleanVar); 
     $('.active').removeClass('active').addClass('oldActive'); 
     if($('.oldActive').is(':first-child')){ 
      $('.slide').last().addClass('active'); 
     } else{ 
      $('.oldActive').prev().addClass('active'); 
     } 
     $('.oldActive').removeClass('oldActive'); 
     $('.slide').fadeOut(speed); 
     $('.active').fadeIn(speed); 
    }); 



     var cleanVar = setInterval(autoScroll, autoswitch_speed); 

    }); 

    function autoScroll() { 
      $('.active').removeClass('active').addClass('oldActive'); 
      if($('.oldActive').is(':last-child')){ 
       $('.slide').first().addClass('active'); 
      } else{ 
       $('.oldActive').next().addClass('active'); 
      } 
      $('.oldActive').removeClass('oldActive'); 
      $('.slide').fadeOut(speed); 
      $('.active').fadeIn(speed); 
     }