Как сделать паузу в анимации на JS?

Question

[Юрий]

Есть код https://jsfiddle.net/hibinyru/549vkdhx/3/ - это анимация статических картинок.

Вопрос 1. Как в этом случае можно по клику на картинке ставить на паузу эту анимацию?

Вопрос 2. Почему при выполнении цикла несколько раз анимация ускоряется, чем дальше тем быстрее

Спасибо заранее

PS. я не очень в JS :( Взял готовый код и подпилил под себя. Что-то новое написать не могу

Comments

[WbICHA]

1. if?
2. Так ты 2 раза апдейт запускаешь...

if (i>=p)
      {
      i=0;
      setTimeout(update, 5000);
      }
    setTimeout(update, 200);

[Юрий]

я думал setTimeout(update, 200); просто ставит на паузу 200 мс, а она запускает ... упс..

[Юрий]

так правильней будет?

if (i>=p)
      {
      i=0;
      setTimeout(update, 5000);
      }
    else
    	{
    	setTimeout(update, 200);
      }

Answer 1

[Арсений Матыцин]

Чтобы «остановить» значение пиши его в переменную, которая позволит начать отсчет не с самого начала. Чтобы можно было восстанавливать, пиши в другую переменную свой интервал и снуляй его при тех событиях, когда тебе надо.

Чтобы исключить ускорение, проверь нет ли у тебя зависимости от инкрементируемого значения или вложенного цикла.

Answer 2

[Danil929292929]

function stopAnimation() {
clearInterval(функция);
}
А второе, даже не знаю как решить

Comments

[Юрий]

а как это оформить то в коде? для лохопедов инструкцию можно?

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

надо как то перехватывать клик и останаливать функцию, а потом стартовать с этого же места по второму клику....