clearInterval funktioniert nicht

Question

Hallo Ich rufe Funktion auf klicken, wenn autoswitch = true Funktion auch setInterval aufruft und autoswitch Wert auf false setzen, indem Sie erneut klick klingInterval, die nicht funktioniert.

etwas Hilfe

$(document).ready(function() { 
    var speed = 500; 
    var autoswitch = true; 
    var autoswitch_speed = 4000; 

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

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

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

    // Click next to show next slide 
    $('#next').click(function() { 
    nextSlide(); 
    }); 

    //Onclick go to prev slide 
    $('#prev').click(function() { 
    prevSlide(); 
    }); 

    //play auto slide show 
    $('#playBtn').click(function() { 
    if (autoswitch === true) { 
     var setIntr = setInterval(nextSlide, autoswitch_speed); 
     autoswitch = false; 
    } else { 
     clearInterval(setIntr); 
     autoswitch = true; 
    } 
    }); 

    // next slide function 
    function nextSlide() { 
    $('.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); 
    } 

    // Prev slide function   
    function prevSlide() { 
    $('.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); 
    } 
}); 

Answer 1

es brauchen, weil Sie setIntr als lokale Variable für diese Funktion definieren. Sobald es den Gültigkeitsbereich verlässt und erneut aufgerufen wird, haben Sie dieses Intervall nicht mehr im Griff. Sie müssen die Variable außerhalb des Gültigkeitsbereichs irgendwo definieren. Ich würde es sich um eine globale, aber ich bin sicher, es könnte bessere Möglichkeiten

Answer 2

Sie müssen sein setIntr außerhalb des klicken Funktion erklären. So können Sie es an der Spitze der bereit Funktion einstellen.

Ich habe gegangen und fixiert Ihren Code hier: https://snippetbox.xyz/9eb54a2a1f52dc1f5d40/

$(document).ready(function() { 
    var speed = 500; 
    var autoswitch = true; 
    var autoswitch_speed = 4000; 
    var setIntr; 

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

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

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

    // Click next to show next slide 
    $('#next').click(function() { 
    nextSlide(); 
    }); 

    //Onclick go to prev slide 
    $('#prev').click(function() { 
    prevSlide(); 
    }); 

    //play auto slide show 
    $('#playBtn').click(function() { 
    if (autoswitch === true) { 
     setIntr = setInterval(nextSlide, autoswitch_speed); 
     autoswitch = false; 
    } else { 
     clearInterval(setIntr); 
     autoswitch = true; 
    } 
    }); 

    // next slide function 
    function nextSlide() { 
    $('.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); 
    } 

    // Prev slide function   
    function prevSlide() { 
    $('.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); 
    } 
}); 

Answer 3

Sie müssen nur Variable hinzufügen "setIntr" aus der Seite des if-Bedingung als wie unten:

$('#playBtn').click(function() { 
    var setIntr; 
    if (autoswitch === true) { 
    setIntr = setInterval(nextSlide, autoswitch_speed); 
    autoswitch = false; 
    } else { 
    clearInterval(setIntr); 
    autoswitch = true; 
    } 
    }); 

Wie Sie habe "setIntr" in If Condition deklariert, was in else nicht verfügbar ist, also wenn du es auch in else verwenden willst, musst du es außerhalb des if oder global deklarieren.

BEARBEITET: Sie versuchen, den Wert in einer Bedingung zu setzen und sonst einchecken. In diesem Fall müssen Sie die "setIntr" als globale Variable deklarieren.

so die Arbeits Code sollte wie folgt gestaltet sein:

declare "setIntr" global in document.ready

dann den folgenden Code verwenden:

$('#playBtn').click(function() { 
if (autoswitch === true) { 
    setIntr = setInterval(nextSlide, autoswitch_speed); 
    autoswitch = false; 
} else { 
    clearInterval(setIntr); 
    autoswitch = true; 
} 
});