Другой способ «ждать» во время анимации JavaScript

Question

Я ищу другой способ выполнить этот код:

$.each($("#gallery > img"), function(index,curImg) {

        setTimeout(function() {
            clearCanvas();
            cvsCtx.drawImage(curImg,0,0);
        } , index*animationMs);

    });

Этот код рисует изображение из моей галереи на холсте каждые animationMs . Но я бы хотел, чтобы была возможность остановить анимацию с помощью кнопки «Play / Stop», я не могу сделать это таким образом ... Любая идея или обходной путь? спасибо !!

Answer 1

Я не могу это проверить.Но вы можете остановить анимацию, используя переменную для удержания функции setTimeout следующим образом:

var x; // public var
....
x = setTimeout(......);
// To stop it use:
clearTimeout(x);

Надеюсь, это работает для вас

Answer 2

Я считаю, что создание тайм-аутов в цикле обычно слишком сложно для управления - вам не нужно отменять несколько тайм-аутов. Лучше, чтобы функция выполняла рабочий вызов сам (косвенно), устанавливая тайм-аут непосредственно перед его завершением, потому что тогда вы можете выполнить простой тест if, чтобы решить, следует ли установить следующий тайм-аут и продолжить анимацию.

Возможно, что-то вроде этого:

<input id="playPause" type="button" value="Play">

<script>    
function initAnimation(animationMs, autoRepeat, waitForPlayButton) {
    var currentFrame = 0,
        $imgList = $("#gallery > img"),
        paused = waitForPlayButton;

    function drawNext() {
       clearCanvas();
       cvsCtx.drawImage($imgList[currentFrame++],0,0);

       if (currentFrame >= $imgList.length) {
           currentFrame = 0;
           if (!autoRepeat) {
              paused = true;
              $("playPause").prop("value", "Play");
           }
       }
       if (!paused)
           setTimeout(drawNext, animationMs);
    }

    $("playPause").prop("value", waitForPlayButton ? "Play" : "Pause")
                  .click(function() {
                      this.value = (paused = !paused) ? "Play" : "Pause";
                      if (!paused)
                         drawNext();
                  });
    if (!waitForPlayButton)
       drawNext();
}

initAnimation(100, true, false);
</script>

Если autoRepeat параметр равен false, анимация будет запускаться один раз и останавливаться, но ее можно будет перезапустить с помощью кнопки, в противном случае (очевидно) она просто будет повторяться.

Если waitForPlayButton равно false, анимация начнется немедленно, иначе (очевидно) она начнется при нажатии кнопки.

Нажатие кнопки приостановит текущий кадр.

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

Answer 3

Сначала вы можете добавить изображения в переменную массива javascript (в конечном итоге глобальную), а затем вызвать функцию cycle() в этом массиве для всей его длины.Вы должны поместить свой вызов setTimeout() внутри этой функции, присвоив его переменной: var t=setTimeout("cycle()",animationMs); и выполнить clearTimeout(t);, когда хотите остановить анимацию.

Конечно, вы также можете сохранить в переменнойкадр, в котором вы находились при остановке анимации и перезапуск точно с этого кадра при нажатии кнопки воспроизведения.

Answer 4

Это не совсем анимация ... но все же:

$("#gallery > img").each(function(index,curImg) {
    $(this).delay(index*animationMs).queue(function(next) {    
       clearCanvas();
       cvsCtx.drawImage(curImg,0,0);
       if (next) next();
    });
});

Использование очередей jQuery, как я, позволяет вам .stop(true), $("#gallery > img") или одному изображению и останавливать их «анимацию».

Answer 5

setTimeout возвращает идентификатор timeoutID, который может быть задан clearTimeout в качестве параметра, чтобы предотвратить возникновение времени ожидания.

Подробнее об этом можно прочитать по адресу: https://developer.mozilla.org/en/DOM/window.setTimeout

Хорошоудачи

Answer 6

var images = $("#gallery > img").clone(), interval;

function startLoop() {
  interval = setInterval(function(){
      var image = images[0];
      clearCanvas();
      cvsCtx.drawImage(image,0,0);
      images.append(image);
  }, animationMs);
}

$(".stop").click(function() {clearInterval(interval);});
$(".start").click(startLoop);