title: Are there any DOM/Browser API events or callbacks that are immediate (interrupting the current flow)
body: <p>Most JavaScript/HTML/DOM/Browser callbacks and events are not immediate or not reentrant (not sure that's the right word here). What I mean is even if an event comes in it is added to a queue in the browser and not processed until after the current event exits. </p>
  
  <p>As an example if I try to load an image</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> const img = new Image();
   img.onload = function() {
     console.log("image loaded");
   }
   img.src = 'https://i.imgur.com/ZKMnXce.png';
   for (let i = 0; i &lt; 100000; ++i) {
     console.log(i);
   }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Assuming the browser does not timeout the <code>for</code> loop above is guaranteed to run before the <code>onload</code> event is delivered.</p>
  
  <p>Another example might be postMessage</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> window.onmessage = function() {
      console.log('got message');
   }
   window.postMessage({}, '*');
   for (let i = 0; i &lt; 100000; ++i) {
     console.log(i);
   }
   </code></pre>
  </div>
  </div>
  </p>
  
  <p>Again the loop will finish before the message event arrives.</p>
  
  <p>Those 2 are events but of course there are functions like <code>setTimeout</code> and <code>requestAnimationFrame</code> that take a callback.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>requestAnimationFrame(function() {
    console.log('requestAnimationFrame');
  });
  setTimeout(function() {
    console.log('setTimeout');
  }, 0);
  for (let i = 0; i &lt; 100000; ++i) {
    console.log(i);
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Again the loop will finish before either the rAF or the setTimeout callbacks get called.</p>
  
  <p>Now of course it's possible to manually write APIs that take callbacks that call immediately. In fact AFAICT it's a common mistake and considered an anti-pattern. Example</p>
  
  <pre><code> /*
    * @param {*} params The params
    * @param {function(error, result)} callback where first param is error, null on success
    */
   function doSomethingAsyncThenCallback(params, callback) {
      if (params are bad) {
        callback("bad params");
        return;
      }
      dSomethingAsync then callback(null, result)
   }
  </code></pre>
  
  <p>AFAIK that's considered a bad pattern because the user might not expect the callback to arrive until after their current event has exited. The recommended way to write something like that would be</p>
  
  <pre><code> /*
    * @param {*} params The params
    * @param {function(error, result)} callback where first param is error
    */
   function someSomethingAsyncThenCallback(params, callback) {
      if (params are bad) {
        setTimeout(() =&gt; { callback("bad params"); }, 0);
        return;
      }
      do something async then callback(null, result)
   }
  </code></pre>
  
  <p>So that regardless of the user's code the callback will arrive after the current event ends.</p>
  
  <p>So, my question is: are there any browser APIs (as in APIs build into the browser like XHR, canvas 2d, WebGL, WebAudio, encryption, gamepad, websocket, webrtc, localstorage, etc) where callbacks/events might arrive immediately before the current event has exited?</p>
  
  <p>I know JavaScript can not be interrupted. But, like the poorly implemented JS api above that on success will wait for the current event to exit but on failure will call the callback immediately, are their any native browser APIs that have this behavior?</p>