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

Question

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

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

Heres код до сих пор (упрощена):

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 s, если вы щелкните на кнопке Далее несколько раз, вы можете создать переменную за пределами сферы обратного вызова для хранения setTimeout экземпляра, а затем очистить его, когда кнопка щелкнул. Пример:

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

Answer 2

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

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

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

Answer 3

Вы можете сделать это с помощью setTimeout:

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