clearInterval не работает

Question

Привет Я вызываю функцию при нажатии, когда функция autoswitch = true также вызывает setInterval и устанавливает значение autoswitch равным false, снова щелкая вызов clearInterval, который не работает.

Нужна помощь

$(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

Это потому, что вы определяете setIntr в качестве локальной переменной к этой функции. Как только он выходит из области действия и вызывается снова, у вас больше нет дескриптора на этом интервале. Вы должны где-то определить var вне области. Я хотел бы сделать его глобальным, но я уверен, что может быть более эффективными способами

Answer 2

Вы должны объявить setIntr за пределы щелчка функции. Итак, вы можете установить его в верхней части функции.

Я пошел и фиксированный код здесь: 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

вам просто нужно добавить переменную «setIntr» из СТОРОНА, если условие, как, как показано ниже:

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

Как вам объявили «setIntr» в условии If, которое не доступно в противном случае, поэтому, если вы хотите использовать его в другом месте, тогда вы должны объявить его стороной if или глобально.

EDITED: Вы пытаетесь установить значение в одном состоянии и проверить в другом месте. в этом случае вам необходимо объявить «setIntr» в качестве глобальной переменной.

поэтому рабочий код должен быть как следующее:

объявляют "setIntr" по всему миру в document.ready

затем используйте следующий код:

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