如何停止或暂停这个程序?

How to stop or pause this program?

我尝试使用 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);

设置时尝试保存 Timeout 的 ID:

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

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

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

我会说最简单的是将超时存储在一个变量中,您可以稍后清除,例如

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

您的回调应该停止调用 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);
        });
    }
}