Сброс интервала на изображении

Question

У меня есть простой слайдер изображения, который я получил от Интернета. Я не знаю много JQuery вообще, только то, что я понимаю, прочитав код, который у меня есть. Код имеет слайдер изображения, который продвигается каждые 8 ​​секунд и имеет две кнопки, которые будут продвигать изображения по щелчку, либо вперед, либо назад. Моя проблема заключается в том, что, когда я нажимаю кнопку для перехода вперед, 8-секундный таймер не сбрасывается, так что, если я нахожу 6 секунд в интервале, изображение переходит на третье изображение через 2 секунды. Прилагается мой код JQuery. Я попытался добавить setInterval в функции moveLeft() и moveRight(), но это не сработало. Прошу прощения за недостаток JQuery знания, я изучил базовый JavaScript в школе и не использовал его много, если вообще не было. Прикрепленный код, который у меня есть.

jQuery(document).ready(function ($) { 


    setInterval(function() { 
     moveRight(); 
    }, 8000); 

    var slideCount = $('#slider ul li').length; 
    var slideWidth = $('#slider ul li').width(); 
    var slideHeight = $('#slider ul li').height(); 
    var sliderUlWidth = slideCount * slideWidth; 

    $('#slider').css({ width: slideWidth, height: slideHeight }); 

    $('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth }); 

    $('#slider ul li:last-child').prependTo('#slider ul'); 

    function moveLeft() { 
     $('#slider ul').animate({ 
      left: + slideWidth 
     }, 1000, function() { 
      $('#slider ul li:last-child').prependTo('#slider ul'); 
      $('#slider ul').css('left', ''); 
     }); 
    }; 

    function moveRight() { 
     $('#slider ul').animate({ 
      left: - slideWidth 
     }, 1000, function() { 
      $('#slider ul li:first-child').appendTo('#slider ul'); 
      $('#slider ul').css('left', ''); 
     }); 
    }; 

    $('a.control_prev').click(function() { 
     moveLeft(); 

     setInterval(function() { 
     moveRight(); 
    }, 8000); 

    }); 

    $('a.control_next').click(function() { 
     moveRight(); 

     setInterval(function() { 
     moveRight(); 
    }, 8000); 

    }); 
}); 

Answer 1

Вы с этой проблемой, потому что всякий раз, когда вы создаете новый интервал для перемещения вправо, ваши предыдущие интервалы все еще существуют. Я рекомендую вам убедиться, что у вас есть только один интервал, имеющий специальную функцию для отмены и REINITIALIZE:

var slideInterval = setInterval(function() { 
    moveRight(); 
}, 8000); 

function resetInterval() { 
    clearInterval(slideInterval); 
    slideInterval = setInterval(function() { 
    moveRight(); 
    }, 8000); 
} 

Затем, просто вызовите эту функцию по щелчку:

$('a.control_prev').click(function() { 
    moveLeft(); 
    resetInterval(); 
}); 

$('a.control_next').click(function() { 
    moveRight(); 
    resetInterval(); 
});