带有自动幻灯片和按钮的自定义jquery图像滑块中的setInterval问题

Question

I am creating a custom image slider with custom slide effect in jQuery which has both next & previous buttons and also slides automatically with 5 seconds timeout. Although it works nicely in a quick look but sometimes( I dont know exactly when, maybe when I press the buttons or if I leave it open for some time and minimize the window) the iterval bugs and the slides change after 1 second or less. Also when i press the button i tell it to 1) clear iterval 2) change slide 3) set interval again which means that after i change a slide with the button the timer is set to 5 seconds from the start but this is not happening all the times.Here is the code.

 $(document).ready(function() { 'use strict'; var $carousel = $('.carousel'); var $nextBtn = $('#next'); var $prevBtn = $('#prev'); var animationSpeed = 1000; var pause = 5000; var interval; function nextSlide() { $('.carousel__list').animate({ left: '-200%' }, 500, function() { $('.carousel__list').css('left', '-100%'); $('.carousel__item').last().after($('.carousel__item').first()); }); } function prevSlide() { $('.carousel__list').animate({ left: '0%' }, 400, function() { $('.carousel__list').css('left', '-100%'); $('.carousel__item').first().before($('.carousel__item').last()); }); } function startSlider() { interval = setInterval(function() { nextSlide(); }, pause); } function stopSlider() { clearInterval(interval); } $carousel.on('mouseenter', stopSlider).on('mouseleave', startSlider); startSlider(); $nextBtn.on('click', function() { stopSlider(); nextSlide(); startSlider(); }); $prevBtn.on('click', function() { stopSlider(); prevSlide(); startSlider(); }); }); 

 *, *::after, *::before { margin: 0; padding: 0; box-sizing: border-box; } .carousel { width: 100%; height: 65vh; overflow: hidden; position: relative; } .carousel__list { width: 400%; height: 100%; left: -100%; position: relative; list-style: none; } .carousel__item { width: calc(100% / 4); height: 100%; float: left; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <section class="carousel"> <ul class="carousel__list"> <li class="carousel__item" style="background-color: red"></li> <li class="carousel__item" style="background-color: green"></li> <li class="carousel__item" style="background-color: blue"></li> <li class="carousel__item" style="background-color: yellow"></li> </ul> </section> <button id="prev">PREVIOUS</button> <button id="next">NEXT</button> 

And here is a codepen: https://codepen.io/anon/pen/erpyJj

Answer 1

You are creating more intervals than you think and you don't actually clear each one because you overwrite the interval variable and then you don't a have a reference to the previous intervals, which may still be active.

What you could do is put every interval you create in an array, then when you need to stop all intervals, iterate through that array, clear each interval and empty the array.

// ...
var intervals = [];
// ... 

function stopSlider() {
    console.log("stopSlider() intervals (Before clear): ", intervals);
    intervals.forEach(function(interval) {
        clearInterval(interval); // stop one interval
    });
    intervals = []; // clear the array
    console.log("stopSlider() intervals (After clear): ", intervals);
}

Here is your demo with many console logs. You can see that it doesn't matter how much you click on any button, the slider only automatically slides every 5 s.

 $(document).ready(function() { "use strict"; //cache dom elements var $carousel = $(".carousel"); var $nextBtn = $("#next"); var $prevBtn = $("#prev"); var animationSpeed = 1000; var pause = 5000; var intervals = []; function nextSlide() { console.log("nextSlide() intervals: ", intervals); $(".carousel__list").animate({ left: "-200%" }, 500, function() { $(".carousel__list").css("left", "-100%"); $(".carousel__item") .last() .after($(".carousel__item").first()); }); } function prevSlide() { console.log("prevSlide() intervals: ", intervals); $(".carousel__list").animate({ left: "0%" }, 400, function() { $(".carousel__list").css("left", "-100%"); $(".carousel__item") .first() .before($(".carousel__item").last()); }); } function startSlider() { console.log("startSlider() interval (BEFORE): ", intervals); var interval = setInterval(function() { nextSlide(); }, pause); intervals.push(interval); console.log("startSlider() interval (AFTER): ", intervals); } function stopSlider() { console.log("stopSlider() intervals (Before clear): ", intervals); intervals.forEach(function(interval) { clearInterval(interval); // stop one interval }); intervals = []; // clear the array console.log("stopSlider() intervals (After clear): ", intervals); } $carousel.on("mouseenter", stopSlider).on("mouseleave", startSlider); startSlider(); $nextBtn.on("click", function() { stopSlider(); nextSlide(); startSlider(); }); $prevBtn.on("click", function() { stopSlider(); prevSlide(); startSlider(); }); }); 

 *, *::after, *::before { margin: 0; padding: 0; box-sizing: border-box; } .carousel { width: 100%; height: 20vh; overflow: hidden; position: relative; } .carousel__list { width: 400%; height: 100%; left: -100%; position: relative; list-style: none; } .carousel__item { width: calc(100% / 4); height: 100%; float: left; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <section class="carousel"> <ul class="carousel__list"> <li class="carousel__item" style="background-color: red"></li> <li class="carousel__item" style="background-color: green"></li> <li class="carousel__item" style="background-color: blue"></li> <li class="carousel__item" style="background-color: yellow"></li> </ul> </section> <button id="prev">PREVIOUS</button> <button id="next">NEXT</button>