另一种方法是；“等等”；在javascript动画期间

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

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

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

    });

这段代码在每个动画中从我的图库绘制一幅图像到我的画布。 但是我想用“播放/停止”按钮使动画停止成为可能，我不能这样做。。。

---

有什么想法或解决办法吗？？谢谢

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

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

---

希望这对你有用

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

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

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

---

希望这对您有用

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

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

您可以通过以下网址了解更多信息：

---

祝您好运

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

您可以通过以下网址了解更多信息：

---

祝你好运这不是真正的动画。。。但仍然：

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

---

像我一样使用jQuery队列，可以在

$（“#gallery>img”）

或单个图像上执行

.stop（true）

，并停止它们的“动画”。

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

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

---

像我一样使用jQuery队列可以在

$（“#gallery>img”）

或单个图像上执行

.stop（true）

，并停止它们的“动画”。

首先可以将图像添加到javascript数组变量（最终为全局），然后在该数组上调用函数

cycle（）

。 您应该将

setTimeout（）

调用放在该函数中，将其分配给一个变量：

var t=setTimeout（“cycle（）”，animationMs）并执行
清除超时（t）当您要停止动画时

当然，您也可以将停止动画时的帧保存在变量中，并在按下“播放”按钮时从该帧重新启动。
首先，您可以将图像添加到javascript数组变量（最终为全局变量），然后在该数组的所有长度上调用函数
cycle（）
。
您应该将
setTimeout（）
调用放在该函数中，将其分配给一个变量：
var t=setTimeout（“cycle（）”，animationMs）并执行
清除超时（t）当您要停止动画时

当然，您也可以将停止动画时的帧保存在一个变量中，并在按下“播放”按钮时从该帧重新启动。
我发现在循环中创建超时通常很难管理-您不想取消多个超时。最好在函数完成之前设置一个超时，让函数自己（间接地）进行工作调用，因为这样可以进行一个简单的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>


函数initAnimation（animationMs、autoRepeat、waitForPlayButton）{
var currentFrame=0，
$imgList=$（“#画廊>img”），
暂停=等待播放按钮；
函数drawNext（）{
clearCanvas（）；
cvsCtx.drawImage（$imgList[currentFrame++]，0,0）；
如果（当前帧>=$imgList.length）{
currentFrame=0；
if（！autoRepeat）{
暂停=真；
$（“播放暂停”）.prop（“值”、“播放”）；
}
}
如果（！暂停）
设置超时（drawNext、animationMs）；
}
$（“播放暂停”）.prop（“值”，waitForPlayButton？“播放”：“暂停”）
。单击（函数（）{
this.value=（暂停=！暂停）？“播放”：“暂停”；
如果（！暂停）
drawNext（）；
});
如果（！waitForPlayButton）
drawNext（）；
}
初始化动画（100，真，假）；

如果
autoRepeat
param为false，动画将运行一次并停止，但可以通过按钮重新启动，否则（显然）它将继续重复

如果
waitForPlayButton
为false，动画将立即启动，否则（显然）当按下按钮时动画将启动

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

（由于我手头没有一堆图像，因此未进行测试，但我相信您已经了解了这个想法，并且可以自己解决任何问题。如果出现错误，请告诉我……）
我发现在循环中创建超时通常太难管理-您不想取消多个超时。最好在函数完成之前设置一个超时，让函数自己（间接地）进行工作调用，因为这样可以进行一个简单的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>


函数initAnimation（animationMs、autoRepeat、waitForPlayButton）{
var currentFrame=0，
$imgList=$（“#画廊>img”），
暂停=等待播放按钮；
函数drawNext（）{
clearCanvas（）；
cvsCtx.drawImage（$imgList[currentFrame++]，0,0）；
如果（当前帧>=$imgList.length）{
currentFrame=0；
if（！autoRepeat）{
暂停=真；
$（“播放暂停”）.prop（“值”、“播放”）；
}
}
如果（！暂停）
设置超时（drawNext、animationMs）；
}
$（“播放暂停”）.prop（“值”，waitForPlayButton？“播放”：“暂停”）
。单击（函数（）{
this.value=（暂停=！暂停）？“播放”：“暂停”；
如果（！暂停）
drawNext（）；
});
如果（！waitForPlayButton）
drawNext（）；
}
初始化动画（100，真，假）；

如果
autoRepeat
param为false，动画将运行一次并停止，但可以通过按钮重新启动，否则（显然）它将继续重复

如果
waitForPlayButton