title: Is it ok to await setTimeout in a for loop?
body: <p>Until <code>Async/Await</code> when we needed to make a recurrent thing <strong>N</strong> times every <strong>X</strong> seconds we had the choice between a for loop that wrap a <code>settimeout</code> or to use a wrapper around <code>setinterval</code> to count the number of times it was executed and clear it. </p>
  
  <p>But with async await is it okay to do this:</p>
  
  <pre><code>async function newFashion() {
    for (let i = 0; i &lt; 10; i++) {
      console.log(i);
      await sleep(1000);
    }
    console.log("Finish"); 
  }
  newFashion(); // 0 1 2 3 4 5 6 7 8 9 Finish
  
  function oldFashion() {
    for (let i = 0; i &lt; 10; i++) {
      setTimeout(() =&gt; {
        console.log(i);
      }, i * 1000);
    }
    console.log("Finish");
  }
  oldFashion(); // Finish 0 1 2 3 4 5 6 7 8 9
  
  function sleep(time) {
    return new Promise((resolve) =&gt; { 
      setTimeout(resolve, time);
    });
  }
  </code></pre>
  
  <p>I know that the two don't behave the same. <code>oldFashion()</code> doesn't actually "pause" in the loop, but actually call the 10 <code>setTimeout()</code> while iterating, so basically he fills the event loop with 10 <code>setTimeout()</code>.</p>
  
  <p><code>newFashion()</code> however behaves as it should be, he "stop" iterating when he hit the await, but I'm not sure exactly how that work.</p>
  
  <p>So what is better, filling the event loop with N <code>setTimeout()</code>, or awaiting one after the other? And what is actually happening in <code>newFashion()</code>?</p>
  
  <blockquote>
    <p><strong>EDIT</strong>: To be a little more specific, <em>what is the gain</em> of each method in terms of performance? When N is small? When N is huge? </p>
  </blockquote>