Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

There are so many questions about JavaScript's requestAnimationFrame already and (I think) I understand the concept but is there any performance difference between with and without cancelAnimationFrame in this context?

// Setup a timer
var timeout;
// Listen for resize events
window.addEventListener('scroll', function () {
    console.log( 'no debounce' );
    // Cancel last animation, if there's one
    if (timeout) {
        window.cancelAnimationFrame(timeout);
    // Setup the new requestAnimationFrame()
    timeout = window.requestAnimationFrame(function () {
        // Run our scroll functions
        console.log( 'debounced' );
}, false);
without cancelAnimationFrame: 
// Setup a timer
var timeout;
// Listen for resize events
window.addEventListener('scroll', function () {
    console.log( 'no debounce' );
    // Setup the new requestAnimationFrame()
    window.requestAnimationFrame(function () {
        // Run our scroll functions
        console.log( 'debounced' );
}, false);
I get the same result on each code.
But I want to know what happens if I don't cancel the animation frame. Does requested function get stacked somewhere in memory or something?
function rafCb(now) {
  if (isRafLogged) {
    console.log('rAF callback executed at: ', now, 'ms');
  requestAnimationFrame(rafCb);
function onWindowScroll() {
  // when in scroll, log aforescheduled rAF() only when in scroll
  isRafLogged = true;
  const now = performance.now();
  console.log('scroll callback executed at: ', now, 'ms');
  // when out of scroll, stop logging the rAF
  setTimeout(function() {
    isRafLogged = false;
requestAnimationFrame(rafCb);
window.addEventListener('scroll', onWindowScroll);
html,
body {
  height: 10000px;
  font-size: 200px;
  writing-mode: vertical-lr;
<p>.....................................................................................................................................................................................................................................................................................................................................................................</p>
If we schedule a continuous separate requestAnimationFrame loop while we scroll, we will clearly see that rAF and scroll callbacks are happening 
at max once per VSync event.
Thus returning to your main question
  
is there any performance difference between with and without cancelAnimationFrame in this context ?
Generally no, because your requestAnimationFrame() call is blocking the next scroll callback, and you cannot have more scroll callbacks executed than your requested frame callback, there is a 1 to 1 correlation, since they both happen at max every frame render.
  
But I want to know what happens if I don't cancel the animation frame. Does requested function get stacked somewhere in memory or something?
All requested animation frame callbacks are stacked in the internal pool of callbacks, that get flushed before the nearest Vsync event. So yes technically the only way to remove the scheduled callbacks is cancelAnimationFrame(), but again it's not relevant in your case since your requestAnimationFrame() callback is happening at the "same" time with window scroll callback.
Hope it makes sense.
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.