Попытка приостановить setinterval на 10 секунд при нажатии кнопки

Question

Я пытаюсь временно приостановить setInterval когда нажата кнопка "Далее". В настоящее время он останавливает текущий setinterval, но не запускает его снова через 10 секунд.

У меня есть простой ротатор изображения, который меняет изображение каждые 4 секунды. Когда нажата кнопка "Далее", я хочу, чтобы она приостановила интервал на 10 секунд, прежде чем снова начать вращение на 4 секунды.

Вот код на данный момент (был упрощен):

var ic = $('#imageContainer');
var numItems = $('.image').size();
var position = 0;
ic.css('left', '0px');

var inter;

function rotate() {
    inter = setInterval(function () {
        if (position == (numItems - 1)) {
            console.log(position);
            $('.image').first().insertAfter($('.image').last());
            ic.css('left', '+=400px');
            position--;
        }
        ic.animate({
            left: "-=400px"
        });
        position += 1;
    }, 4000);
}
rotate();

$('#next').click(function () {
    clearInterval(inter);
    nextInter = setInterval(function () {
        rotate();
    }, 10000);
    clearInterval(nextInter);
});

Answer 1

Это происходит потому, что вы очищаете nextInter только одна строка после того, как вы его создали.

nextInter = setInterval(function(){rotate();}, 10000 );
clearInterval(nextInter);

Однако, если вы удалите последний clearInterval, ваш nextInter интервал позвонит rotate каждые 10 секунд, это будет устанавливать новый интервал каждые 4 секунды. Это, безусловно, вызовет неожиданное поведение. Я думаю, что вы ищете setTimeout вместо.

$('#next').click(function () {
    clearInterval(inter);
    setTimeout(rotate, 10000);
});

Кроме того, если вы хотите предотвратить выполнение нескольких rotateЕсли вы нажимаете следующую кнопку несколько раз, вы можете создать переменную вне области обратного вызова, чтобы сохранить setTimeout экземпляр, а затем очистить его при нажатии кнопки. Пример:

var rotateTimeout;
$('#next').click(function () {
    clearInterval(inter);
    clearTimeout(rotateTimeout);
    rotateTimeout = setTimeout(rotate, 10000);
});

Answer 2

После составления графика nextInterВы очищаете его вскоре после того, как оно выполнено.

Здесь вам нужно установить setTimeout() вместо setInterval (). Вам нужно было вызвать rotate через 10 секунд, но setInterval будет вызывать его каждые 10 секунд, поэтому вы очищали его, но проблема заключалась в том, что вы очищали его до того, как он смог выполнить rotate хотя бы один раз.

$('#next').click(function () {
    clearInterval(inter);
    setTimeout(rotate, 10000 );
});

Answer 3

Вы можете сделать это используя setTimeout:

$('#next').click(function () {
    clearInterval(inter);
    nextInter = setTimeout(rotate, 10000);
});