Как перезапустить setInterval?

Question

[Иван Шульга]

Есть анимация svg, которая повторяется через setInterval, при клике на кнопку нужно перезапустить цикл анимации, так вот как это сделать?

function animate() {
        //code
}
animate()
let timer = setInterval(function() {
    animate() 
}, 5000);
    
$('#owlNav > .next-nav').on("click", function() {
    setTimeout(() => { clearInterval(timer); }, 0);
    animate()
})

Comments

[Сергей Соколов]

при клике требуется что — дождаться, пока доиграет текущая анимация и только после этого стартануть новую?
Чем это отличается от того, что она просто стартует по таймеру раз в 5 секунд?

Answer 1

[Василий Банников]

Запустить новый setInterval

Comments

[Иван Шульга]

Это то понятно, если запустить интервал внутри клика, то анимация будет заканчиваться намного раньше

[DimaIs]

Иван Шульга, что значит немного раньше? Можете описать проблему?

[Иван Шульга]

DimaIs, имеется в виду вот так? Если так, то анимация не перезагружается. Прошу простить меня за мою неопытность.

$('#owlNav > .next-nav').on("click", function() {
    setTimeout(() => { clearInterval(timer); }, 0);
    timer = setInterval(function() {
      animate() 
}, 5000);
})

[DimaIs]

Иван Шульга, она не перезагружается, т.к. вы не запускаете функцию animate.

[Иван Шульга]

DimaIs, Благодарю вас, напишите что-нибудь в ответе, чтобы я пометил как верным

[Иван Шульга]

DimaIs, хотя все же есть вопрос, после клика первая анимация все же не доходит до конца, обрываясь

[DimaIs]

Иван Шульга, в течение получаса вам отпишу

[DimaIs]

Иван Шульга, вам необходимо, чтобы анимация доигрывала, или чтобы при клике начиналась новая?

[Иван Шульга]

DimaIs, новая, но эта новая анимация первый раз доигрывается не до конца, а со следующих раз все отлично

[DimaIs]

Иван Шульга, возможно, проблема в самом процессе анимации. Можете код скинуть?

[Иван Шульга]

DimaIs, https://codepen.io/ZamarShoo/pen/rNWzoOZ