window.cancelAnimationFrame() - Web APIs
the window.cancelanimationframe() method cancels an animation frame request previously scheduled through a call to window.requestanimationframe().
... syntax window.cancelanimationframe(requestid); parameters requestid the id value returned by the call to window.requestanimationframe() that requested the callback.
... examples var requestanimationframe = window.requestanimationframe || window.mozrequestanimationframe || window.webkitrequestanimationframe || window.msrequestanimationframe; var cancelanimationframe = window.cancelanimationframe || window.mozcancelanimationframe; var start = window.mozanimationstarttime; // only supported in ff.
... var myreq; function step(timestamp) { var progress = timestamp - start; d.style.left = math.min(progress / 10, 200) + 'px'; if (progress < 2000) { // it's important to update the requestid each time you're calling requestanimationframe myreq = requestanimationframe(step); } } myreq = requestanimationframe(step); // the cancelation uses the last requestid cancelanimationframe(myreq); specifications specification status comment html living standardthe definition of 'cancelanimationframe()' in that specification.

XRSession.cancelAnimationFrame() - Web APIs
the cancelanimationframe() method of the xrsession interface cancels an animation frame which was previously requested by calling requestanimationframe.
... syntax xrsession.cancelanimationframe(handle); parameters handle the unique value returned by the call to requestanimationframe() that previously scheduled the animation callback.
...nction framecallback(time, xrframe) { xrsession.requestanimationframe(framecallback); // update and render the frame } async function startxr() { xrsession = xr.requestsession("immersive-vr"); if (xrsession) { stopbutton.onclick = stopxr; requesthandle = xrsession.requestanimationframe(framecallback); } } function pausexr() { if (xrsession && requesthandle) { xrsession.cancelanimationframe(requesthandle); requesthandle = null; } } specifications specification status comment webxr device apithe definition of 'xrsession.cancelanimationframe' in that specification.

Advanced animations - Web APIs
losepath(); ctx.fillstyle = this.color; ctx.fill(); } }; function draw() { ctx.clearrect(0,0, canvas.width, canvas.height); ball.draw(); ball.x += ball.vx; ball.y += ball.vy; raf = window.requestanimationframe(draw); } canvas.addeventlistener('mouseover', function(e) { raf = window.requestanimationframe(draw); }); canvas.addeventlistener('mouseout', function(e) { window.cancelanimationframe(raf); }); ball.draw(); boundaries without any boundary collision testing our ball runs out of the canvas quickly.
...ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) { ball.vy = -ball.vy; } if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) { ball.vx = -ball.vx; } raf = window.requestanimationframe(draw); } canvas.addeventlistener('mouseover', function(e) { raf = window.requestanimationframe(draw); }); canvas.addeventlistener('mouseout', function(e) { window.cancelanimationframe(raf); }); ball.draw(); acceleration to make the motion more real, you can play with the velocity like this, for example: ball.vy *= .99; ball.vy += .25; this slows down the vertical velocity each frame, so that the ball will just bounce on the floor in the end.
...ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) { ball.vy = -ball.vy; } if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) { ball.vx = -ball.vx; } raf = window.requestanimationframe(draw); } canvas.addeventlistener('mouseover', function(e) { raf = window.requestanimationframe(draw); }); canvas.addeventlistener('mouseout', function(e) { window.cancelanimationframe(raf); }); ball.draw(); trailing effect until now we have made use of the clearrect method when clearing prior frames.
...And 2 more matches

Anatomy of a video game - Game development
note: in practice, it is more common to prevent the next requestanimationframe() with an if-statement, rather than calling cancelanimationframe().
... for the second issue, stopping the main loop, you will need to cancel the call to main() with window.cancelanimationframe().
... you will need to pass cancelanimationframe() the id token given by requestanimationframe() when it was last called.
... window.cancelanimationframe( mygame.stopmain ); the key to programming a main loop, in javascript, is to attach it to whatever event should be driving your action and pay attention to how the different systems involved interplay.

Cooperative asynchronous JavaScript: Timeouts and intervals - Learn web development
(you can see the source code, also.) clearing a requestanimationframe() call clearing a requestanimationframe() call can be done by calling the corresponding cancelanimationframe() method.
... (note that the function name starts with "cancel", not "clear" as with the "set..." methods.) just pass it the value returned by the requestanimationframe() call to cancel, which you stored in the variable raf: cancelanimationframe(raf); active learning: starting and stopping our spinner in this exercise, we'd like you to test out the cancelanimationframe() method by taking our previous example and updating it, adding an event listener to start and stop the spinner when the mouse is clicked anywhere on the page.
... add the following function to your code next: function setendgame() { cancelanimationframe(raf); spinnercontainer.style.display = 'none'; result.style.display = 'block'; result.textcontent = 'players go!!'; document.addeventlistener('keydown', keyhandler); function keyhandler(e) { let isover = false; console.log(e.key); if (e.key === "a") { result.textcontent = 'player 1 won!!'; isover = true; } else if (e.key === "l") { result.textcontent...
... = 'player 2 won!!'; isover = true; } if (isover) { document.removeeventlistener('keydown', keyhandler); settimeout(reset, 5000); } }; } stepping through this: first, cancel the spinner animation with cancelanimationframe() (it is always good to clean up unneeded processes), and hide the spinner container.

Drawing graphics - Learn web development
the loop ends when you stop calling requestanimationframe() or if you call window.cancelanimationframe() after calling requestanimationframe() but before the frame is called.
... note: it's good practice to call cancelanimationframe() from your main code when you're done using the animation, to ensure that no updates are still waiting to be run.

Index - Web APIs
5072 window.cancelanimationframe() api, animation, dom, experimental, method, reference, window the window.cancelanimationframe() method cancels an animation frame request previously scheduled through a call to window.requestanimationframe().
... 5261 xrsession.cancelanimationframe() api, ar, augmented reality, experimental, method, reference, vr, virtual reality, webxr, webxr device api, xrsession, cancelanimationframe() the cancelanimationframe() method of the xrsession interface cancels an animation frame previously requested via a call to xrsession.requestanimationframe.

Movement, orientation, and motion: A WebXR example - Web APIs
function sessionended() { xrbutton.innertext = "enter webxr"; if (animationframerequestid) { xrsession.cancelanimationframe(animationframerequestid); animationframerequestid = 0; } xrsession = null; } we can also call sessionended() directly if we wish to programmatically end the webxr session.
... in either case, the label of the button is updated to indicate that a click will start a session, and then, if there is a pending request for an animation frame, we cancel it by calling cancelanimationframe once that's done, the value of xrsession is changed to null to indicate that we're done with the session.

XRSession.requestAnimationFrame() - Web APIs
you can cancel a previously scheduled animation by calling cancelanimationframe().
... return value an integer value which serves as a unique, non-zero id or handle you may pass to cancelanimationframe() if you need to remove the pending animation frame request.

XRSession - Web APIs
cancelanimationframe() removes a callback from the animation frame painting callback from xrsession's set of animation frame rendering callbacks, given the identifying handle returned by a previous call to requestanimationframe().
...returns an integer value which can be used to identify the request for the purposes of canceling the callback using cancelanimationframe().

AudioContext.getOutputTimestamp() - Web APIs
play.addeventlistener('click', () => { if(!audioctx) { audioctx = new window.audiocontext(); } getdata(); source.start(0); play.setattribute('disabled', 'disabled'); raf = requestanimationframe(outputtimestamps); }); stop.addeventlistener('click', () => { source.stop(0); play.removeattribute('disabled'); cancelanimationframe(raf); }); // function to output timestamps function outputtimestamps() { let ts = audioctx.getoutputtimestamp() console.log('context time: ' + ts.contexttime + ' | performance time: ' + ts.performancetime); raf = requestanimationframe(outputtimestamps); } specifications specification status comment web audio apithe definition of 'getoutputtimestamp()' in that spe...

Using the Gamepad API - Web APIs
to start with, we declare some variables: the gamepadinfo paragraph that the connection info is written into, the ball that we want to move, the start variable that acts as the id for requestanimation frame, the a and b variables that act as position modifiers for moving the ball, and the shorthand variables that will be used for the requestanimationframe() and cancelanimationframe() cross browser forks.

Web audio spatialization basics - Web APIs
n listen for a mouse event on our controls and run this function, as well as stop it when the mouse is released: // for each of our controls, move the boombox and change the position values movecontrols.foreach(function(el) { let moving; el.addeventlistener('mousedown', function() { let direction = this.dataset.control; if (moving && moving.frameid) { window.cancelanimationframe(moving.frameid); } moving = moveboombox(direction); }, false); window.addeventlistener('mouseup', function() { if (moving && moving.frameid) { window.cancelanimationframe(moving.frameid); } }, false) }) summary hopefully, this article has given you an insight into how web audio spatialization works, and what each of the pannernode prop...

Window.requestAnimationFrame() - Web APIs
you can pass this value to window.cancelanimationframe() to cancel the refresh callback request.

Window - Web APIs
window.cancelanimationframe() enables you to cancel a callback previously scheduled with window.requestanimationframe.