title: requestAnimationFrame with clearAnimationFrame on scroll event
body: <p>There are so many questions about JavaScript's <code>requestAnimationFrame</code> already and (I think) I understand the concept but is there any performance difference between with and without <code>cancelAnimationFrame</code> in this context?</p>
  
  <pre><code>// 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);
  </code></pre>
  
  <p>without <code>cancelAnimationFrame</code>: </p>
  
  <pre><code>// 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);
  </code></pre>
  
  <p>I get the same result on each code.</p>
  
  <p>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?</p>