CODEWITHSUNDEEP
javascriptrequestanimationframecancelanimationframe
norixxx
norixxx

Reputation: 3209

requestAnimationFrame with clearAnimationFrame on scroll event

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?

Upvotes: 1

Views: 3310

Answers (1)

Karen Grigoryan
Karen Grigoryan

Reputation: 5442

var isRafLogged = false;

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

p {
  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.

Upvotes: 2

Related Questions