title: Execute a .map() function every 'x' amount of seconds
body: <p>I have a function: </p>
  
  <pre><code>function getPattern (sequence) {
    sequence.map(pod =&gt; pod.classList.add('playing'))
    // rest of code
  }
  </code></pre>
  
  <p>How would I execute <code>pod.classList.add('playing')</code> every, let's say, 2 seconds? Moreover, I want to keep this synchronous to ensure that <code>//rest of code</code> is run after all the <code>pod</code> iterations have finished.</p>
  
  <p>(For those wondering, sequence is just an array of HTML nodes)</p>
  
  <p><strong>EDIT</strong> What I have tried:</p>
  
  <pre><code>sequence.forEach(pod =&gt; setTimeout(() =&gt; { pod.classList.add('playing') }, 2000))
  sequence.map(pod =&gt; setTimeout(() =&gt; { pod.classList.add('playing') }, 2000))
  
  setTimeout(() =&gt; {
   sequence.map(pod =&gt; pod.classList.add('playing'))
  }, 2000)
  setInterval(() =&gt; {
   sequence.map(pod =&gt; pod.classList.add('playing'))
  }, 2000)
  </code></pre>
  
  <p>However I am suffering both problems I wanted to avoid in the question:
  <code>addClass</code> isn't delayed; all iterations execute 'at the same time'. Moreover, the <code>// rest of code</code>  is being run asynchronously (a.k.a I am noticing <code>console.log</code>'s immediately).</p>