title: Player interaction in a while javascript
body: <p>i've encountered a few errors while working on a round by round script for a game on browser, sorry for my spelling mistakes.</p>
  <p>I have a function with a while separated in three parts as the following (full javascript):</p>
  <pre><code>function turn(player, monster){
      //player and monster are object
  
      turns=2;
      //few other unimportant variable
      while(//as long as they have &gt;0 hp){
          
          if(turns==2){
               //listen to click on html to know if player used a spell
               // if he didn't in a few seconds, then he'll just use a normal 
               // attack
               startingTurn = settimeout(startTurn, 2000);
               sleep(2000);
               turns=1;
          }
          if(turns==1 ){
               //Turn of the player (working perfectly)
               ...
               turns=0;
          }
          if(turns==0 and hp&gt;0){
               //Turn of the monster (working perfectly)
               ...
               turns=2;
          }
      }
   }
  </code></pre>
  <p>The problem that i've encountered is that in the listening of an action, i have to set a pause so that the player will have time to click on one of the spell.</p>
  <p>To do this, i've tryed using &quot;sleep&quot; function to let 2 seconds for the player to act and a settimeout() to set a normal attack if there were no spell clicked.</p>
  <p>The sleep function that i used looked like this one: <a href="https://www.sitepoint.com/delay-sleep-pause-wait/" rel="nofollow noreferrer">https://www.sitepoint.com/delay-sleep-pause-wait/</a></p>
  <p>Both those methods gave me errors:</p>
  <p>-The settimeout() were effective only after the whole script(while) was finished (all at once).</p>
  <p>-The &quot;sleep&quot; function caused the whole page to freeze, not only the while but also the html wasn't clickable.</p>
  <p>So I'm looking for a way of leting the player interact while the function is running, if this isn't possible i will probably have to give up the interaction part.</p>
  <p>I've looked online for quite a long time and didn't found any solution so i hope you can help me there!.</p>
  <h2>EDIT</h2>
  <p>I have tried to use the methods from Jacob (with async function and a loop() )because it was what looks the most clear for me.</p>
  <p>But then i found the same first problem wich is that the settimeout() are executed after the loop() function here's where i think the problem is:</p>
  <pre><code> function attaqueBasic (attacker, defender) {
    console.log(&quot;basic attack&quot;);
    return new Promise((res, rej) =&gt; {
      setTimeout(() =&gt; {
          var dodge = dodge(defender);
          if(dodge == false){
              console.log(&quot;attack damage :&quot;+attacker.dmg);
              defender.life = defender.life - attacker.dmg;
              console.log(&quot;life defender: &quot;+defender.vie);
              if(attacker.hasOwnProperty(&quot;bonus&quot;)==true &amp;&amp; defender.life&gt;0){
                  attackBonus(attacker, defender);
              }
          }
          res()
      }, 2000);
    })
  </code></pre>
  <p>}
  This is the function that let the player do a basic attack but it doesn't wait for the resolve to continue.</p>
  <p>In the console i find the &quot;basic attack&quot; while the loop is running but never the following wich is in the settimeout and is executed only after all loops are done. Sorry if i made a big mistake here.</p>
  <p>Here's the function loop() just in case i made some mistake:</p>
  <pre><code>function loop(perso, monstre){
      nbtour += 1
      if(nbtour&gt;=6){
          nbtour=0;
          return;
      }
      console.log('---New tour'+nbtour+'---');
      Turn(perso,monstre)
          .then(checkWin(perso,monstre))
          .then(Turn(monstre,perso))
          .then(checkWin(perso,monstre))
          .then(loop(perso, monstre))
          .catch(() =&gt; {
              console.log('End of combat, number of tours ='+nbtour);
              nbtour=0;
          })
  </code></pre>
  <p>}</p>
  <p>Thanks for your time.</p>