在javascript动画期间“等待”的其他方式答案

【问题标题】：Other way to "wait" during javascript animation在javascript动画期间“等待”的其他方式
【发布时间】：2012-02-01 11:18:35
【问题描述】：

我正在寻找另一种执行此代码的方法：

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

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

    });

此代码每隔 animationMs 从我的画廊中绘制一张图片到我的画布上。但我想用“播放/停止”按钮停止动画，我不能这样做...... 任何想法或解决方法？谢谢！！

【问题讨论】：

标签： javascript jquery animation canvas settimeout

【解决方案1】：

我无法测试它。但是您可以通过使用一个变量来保存 setTimeout 函数来停止动画，如下所示：

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

希望这对你有用

【讨论】：

是的，但是有 N 个这样的xs（对于 N 个图像），因此您需要跟踪所有这些。
是的，我需要跟踪所有图像，所以它不起作用，但还是谢谢你。我必须尝试其他人

【解决方案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 参数为假，动画将运行一次并停止，但可以通过按钮重新启动，否则（显然）它只会不断重复。

如果waitForPlayButton 为假，动画将立即开始，否则（显然）将在按下按钮时开始。

按下按钮将在当前帧暂停。

（未测试，因为我手边没有一堆图像，但我相信您明白了，并且可以自己解决任何问题。或者如果您遇到错误，请告诉我...）

【讨论】：

我回家后必须测试这个，但我认为这可以解决我的问题......
这很棒，您的代码“开箱即用”！非常感谢

【解决方案3】：

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);

【讨论】：

【解决方案4】：

setTimeout 返回一个 timeoutID，可以将其作为参数提供给 clearTimeout 以阻止超时发生。

您可以在以下位置阅读更多信息：https://developer.mozilla.org/en/DOM/window.setTimeout

祝你好运

【讨论】：

【解决方案5】：

这不是真正的动画......但仍然：

$("#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") 或单个图像上执行操作并停止它们的“动画”。

【讨论】：

【解决方案6】：

首先，您可以将图像添加到 javascript 数组变量（最终是全局变量），然后对该数组的所有长度调用函数 cycle()。您应该将您的 setTimeout() 调用放在该函数中，将其分配给一个变量：var t=setTimeout("cycle()",animationMs); 并在您想要停止动画时执行 clearTimeout(t);。

当然，您也可以将停止动画时所在的帧保存在变量中，并在按下“播放”按钮时从该帧重新开始。

【讨论】：