title: Why is an interval function executed before an event callback?
body: <p>I realized something odd about the javascript on scroll event.</p>
  
  <p>Until now I was always convinced that it would be fired directly, whenever the scroll position changes.<br>
  And because javascript is blocking, a callback would always be the first thing to be executed and the first function to "see" this new value – or so I thought.</p>
  
  <p>Here I have simple setup, where a global value gets updated to the current scroll position, on scroll.
  Then there's an interval comparing the two.<br>
  Now if you scroll around very fast it does sometimes happen, that the cached value is not the same as the actual returned scroll position.</p>
  
  <pre><code>// cache scroll pos
  var scrollPos = 0;
  // update on scroll
  window.onscroll = function () {
      scrollPos = scrollTop();
  };
  // compare on interval
  setInterval(function () {
      if (scrollPos != scrollTop()) {
          console.log("Out of sync!  cached:", scrollPos, "| actual:", scrollTop());
      }
  }, 100);
  </code></pre>
  
  <p>fiddle: <a href="http://jsfiddle.net/71vdx4rv/2/" rel="nofollow">http://jsfiddle.net/71vdx4rv/2/</a><br>
  You can try scrolling around quickly or using the button.
  [tested on Chrome, Safari, FF, Opera]</p>
  
  <p>Why is the interval function executed and knows about the 'new' scroll position, before the callback is?<br>
  Can someone please explain this to me?  </p>