Как остановить или приостановить эту программу?

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

Попробуйте сохранить идентификатор вашего Timeout когда вы установите его:

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

Затем, чтобы остановить анимацию, оно должно быть простым, как очистка таймаут с помощью ID:

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

Answer 3

Я бы сказал, что проще всего хранить таймаут в переменной, вы можете позже ясно, например,

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