javascript - 如何停止或暂停这个程序？

Question

我尝试使用 clearTimeout，但失败了，谁能告诉我如何停止或暂停这个动画？下面是我的javascript代码：

window.requestAnimFrame = (function(callback) {
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
    function(callback) {
      window.setTimeout(callback, 1000 / 60);
    };
})();

function drawRectangle(myRectangle, context) {
    context.beginPath();
    context.rect(myRectangle.x, myRectangle.y, myRectangle.width, myRectangle.height);
    context.fillStyle = 'green';
    context.fill();
    context.lineWidth = myRectangle.borderWidth;
    context.strokeStyle = 'black';
    context.stroke();
}

function myFunction() {
   var m = document.getElementById("myRange").value;
   document.getElementById("demo").innerHTML = m;
}

function animate(myRectangle, canvas, context, startTime) {

    var time = (new Date()).getTime() - startTime;
    var m = document.getElementById("myRange").value;
    myRectangle.y = 380 - m * Math.cos(time * Math.PI / 2000);
    context.clearRect(0, 0, canvas.width, canvas.height); 
    drawRectangle(myRectangle, context);

   requestAnimFrame(function() {
      animate(myRectangle, canvas, context, startTime);
    });
}

var myRectangle = {
    x: 150,
    y: 150,
    width: 50,
    height: 50,
    borderWidth: 4
};

drawRectangle(myRectangle, context);

setTimeout(function() {
    var startTime = (new Date()).getTime();
    animate(myRectangle, canvas, context, startTime);
}, 0);

Answer 1

您的回调应该停止调用 requestAnimationFrame

var stop = false;
function stopAnimation() {
    stop = true;
}

function animate(myRectangle, canvas, context, startTime) {

    // ...

    if (stop) {
        stop = false;
    }
    else {
        requestAnimFrame(function() {
            animate(myRectangle, canvas, context, startTime);
        });
    }
}

Answer 2

我想说最简单的方法是将超时存储在一个以后可以清除的变量中，例如

var myTimeout = 0;
window.requestAnimFrame = (function (callback) {
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
        function (callback) {
            myTimeout = window.setTimeout(callback, 1000 / 60);
    };
})();

...

function stopAnimation () {
  if (myTimeout) {
    clearTimeout(myTimeout);
  }
}

Answer 3

设置时尝试保存您的 id Timeout：

var timeoutId = window.setTimeout(...);

然后，要停止动画，应该像使用 id 清除超时一样简单：

function stopAnimation(timeoutId) {
  window.clearTimeout(timeoutId);
}