Why is cancelAnimationFrame not working?
Refer this fiddle - http://jsfiddle.net/rnqLfz14/28/
[This code is not mine - http://www.isaacsukin.com/news/2015/01/detailed-explanation-javascript-game-loops-and-timing ]
//....
function stop() {
running = false;
started = false;
cancelAnimationFrame(frameID);
}
//...
function mainLoop(timestamp) {
// Throttle the frame rate.
if (timestamp < lastFrameTimeMs + (1000 / maxFPS)) {
frameID = requestAnimationFrame(mainLoop);
return;
}
delta += timestamp - lastFrameTimeMs;
lastFrameTimeMs = timestamp;
begin(timestamp, delta);
if (timestamp > lastFpsUpdate + 1000) {
fps = 0.25 * framesThisSecond + 0.75 * fps;
lastFpsUpdate = timestamp;
framesThisSecond = 0;
}
framesThisSecond++;
var numUpdateSteps = 0;
while (delta >= timestep) {
update(timestep);
delta -= timestep;
if (++numUpdateSteps >= 240) {
panic();
break;
}
}
draw(delta / timestep);
T.textContent = timestamp;
if (timestamp >= 6000.0) {
T.textContent = "Stopped!";
stop();
}
end(fps);
frameID = requestAnimationFrame(mainLoop);
}
//...
The cancelAnimationFrame function does not stop the animation loop. Do you have suggestions? I've scratched my head over it for a long time, please, any suggestions would be appreciated.
+3
user621162
source
to share
1 answer
When the condition for stop()
, is called stop()
, but the code continues, so a new rAF will be requested.
Just add a return after the stop call to prevent this from happening (or use else
):
...
if (timestamp >= 6000.0) {
T.textContent = "Stopped!";
stop(); // stop() is just a sub-routine here and will continue after being called
return; // <--- here
}
...
+7
source to share