title: How to make non-blocking javascript code?
body: <p>How can I make a simple, non-block Javascript function call?  For example:</p>
  
  <pre><code>  //begin the program
    console.log('begin');
    nonBlockingIncrement(10000000);
    console.log('do more stuff'); 
  
    //define the slow function; this would normally be a server call
    function nonBlockingIncrement(n){
      var i=0;
      while(i&lt;n){
        i++;
      }
      console.log('0 incremented to '+i);
    }
  </code></pre>
  
  <p>outputs</p>
  
  <pre><code>"beginPage" 
  "0 incremented to 10000000"
  "do more stuff"
  </code></pre>
  
  <p>How can I form this simple loop to execute asynchronously and output the results via a callback function?  The idea is to not block "do more stuff":</p>
  
  <pre><code>"beginPage" 
  "do more stuff"
  "0 incremented to 10000000"
  </code></pre>
  
  <p>I've tried following tutorials on callbacks and continuations, but they all seem to rely on external libraries or functions. None of them answer the question in a vacuum: how does one write Javascript code to be non-blocking!?</p>
  
  <hr>
  
  <p><sup>I have searched very hard for this answer before asking; please don't assume I didn't look.  Everything I found is Node.js specific (<a href="https://stackoverflow.com/questions/2878008/how-do-i-create-a-non-blocking-asynchronous-function-in-node-js">[1]</a>, <a href="https://stackoverflow.com/questions/23757363/how-to-create-non-blocking-asynchronous-function-in-node-js-and-express-js">[2]</a>, <a href="https://stackoverflow.com/questions/9362823/why-is-a-function-and-a-callback-non-blocking-in-node-js">[3]</a>, <a href="https://stackoverflow.com/questions/5670190/how-do-i-write-non-blocking-code-in-node-js">[4]</a>, <a href="https://stackoverflow.com/questions/9546225/nodejs-how-to-create-a-non-blocking-computation">[5]</a>) or otherwise specific to other functions or libraries (<a href="https://stackoverflow.com/questions/6828271/javascript-non-blocking-scripts-why-dont-simply-put-all-scripts-before-body#6864146">[6]</a>, <a href="https://stackoverflow.com/questions/7729382/how-to-make-a-non-blocking-sleep-in-javascript-jquery">[7]</a>, <a href="https://stackoverflow.com/questions/6880392/are-jquery-fadein-animation-functions-non-blocking">[8]</a>, <a href="https://stackoverflow.com/questions/15855149/non-blocking-script-not-working-with-jquery">[9]</a>, <a href="https://stackoverflow.com/questions/3845972/whats-the-best-way-to-implement-a-sleep-function-javascript">[10]</a>, <a href="https://stackoverflow.com/questions/10180391/javascript-how-to-avoid-blocking-the-browser-while-doing-heavy-work">[11]</a>), notably JQuery and <code>setTimeout()</code>.  Please help me write non-blocking code using <em>Javascript</em>, not Javascript-written tools like JQuery and Node.  <strong>Kindly reread the question before marking it as duplicate.</strong> </sup></p>