Как перезапустить интервал автоматически после его очистки? - PullRequest
Новая
       20

Как перезапустить интервал автоматически после его очистки?

0 голосов
/ 30 июня 2019

Я создаю слайд-шоу, которое запускается автоматически при загрузке страницы, и оно останавливается, если кто-то нажимает кнопки «предыдущая / следующая» (clearInterval).Моя проблема в том, что я хотел бы перезапустить интервал через некоторое время и после того, как он был очищен.Я пытался с setTimeout, но я думаю, что я делаю что-то не так.

Ползунок основан на «ul» с изображениями внутри, и он покажет каждое из них, изменив поле списка.Кнопки расположены по бокам списка с атрибутом «data-mov», который будет возвращать «prev» или «next», сохраняя это значение в переменной с именем «dir».

Я оставляю фактическое значениеJS код, который у меня есть, ключевой момент в функции «слайд», я верю.

Большое спасибо заранее! 

( function(){

var slider = $( '.slider' );

var slides = slider.find("li").length;

var actual = 0;

var width = 310;

var interval = setInterval( function(){
    slide( 'next' );
}, 1500 );


function slide( dir, click ){

    if ( click ){
       clearInterval( interval );
    }

    ( dir === "next" ) ? actual -- : actual ++;
    if ( actual > 0 ) {
        actual = ( slides - 1 ) *  -1;
    }else if ( actual <= ( slides * -1  ) ) {
        actual = 0;
    }
    var margin = actual * width;

    slider.animate({
        marginLeft: margin
    }, 450);

}

$('.btn-slide').on('click', function () {

    var dir = $(this).data("mov");
//when the button is pressed we send "true" for the "click" argument
    slide( dir , true);
});

})();

1 Ответ

0 голосов
/ 30 июня 2019

Использование setTimout, на мой взгляд, является абсолютно верным способом перезапустить слайд-шоу.

Вы можете легко достичь своей цели, выполнив следующее: 

     var restartTimer;
     function slide( dir, click ){
        if ( click ){
           clearInterval( interval );
           clearTimeout(restartTimer);

           restartTimer = setTimeout(function () {
               setInterval(slide, 1500, 'next');
           }, 10000); // insert time after which you want it to continue here  
        }

        ( dir === "next" ) ? actual -- : actual ++;
        if ( actual > 0 ) {
            actual = ( slides - 1 ) *  -1;
        }else if ( actual <= ( slides * -1  ) ) {
            actual = 0;
        }
        var margin = actual * width;

        slider.animate({
            marginLeft: margin
        }, 450);
    }

setTimout перезапустит его через (в данном случае) 10000 мс, за исключением случаев, когда вы вручную перемещаете ползунок, тогда таймаут будет сброшен функцией clearTimeout. И с этого момента он будет ждать, пока не пройдут 10000 мс, после чего он продолжится снова.

...