title: Javascript function stops executing when another interaction occurs
body: <p>In my code example below I have two buttons that do the following:</p>
  
  <p>1) Clicking button 1 executes a while loop</p>
  
  <p>2) Clicking button 2 executes a log statement</p>
  
  <p>If you click button 1 and then click button 2, button 1 stops executing.</p>
  
  <p>Is it possible to have button 1 continue to execute when another action occurs?</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>function buttonOneClick() {
    let i = 0;
    while (i &lt; 1000) {
      console.log('index is ', i);
      i++;
    }
  }
  
  function buttonTwoClick() {
    console.log('button two clicked');
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button type="button" onclick="buttonOneClick()"&gt;Click Button One and Start Loop&lt;/button&gt;
  &lt;button type="button" onclick="buttonTwoClick()"&gt;Click Button Two&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>