title: How to set a timeout between each iteration in Javascript?
body: <p>I am trying to set a timeout(wait time) between each call of <code>drawLines()</code> inside a <code>setTimeout()</code> in a while-loop.</p>
  
  <pre><code>while(i &lt; j){
              while(i &lt; lastElIndex &amp;&amp; array[i] &lt; pivot){
                  const iCopy = i;
                  const lastCopy = lastElIndex;
                  i++;
                  const arrCopy = array.slice();
                  setTimeout(() =&gt; {
                      drawLines(arrCopy, iCopy, -1, lastCopy, -1);
                  });
              }
  
              while(j &gt; firstElIndex &amp;&amp; array[j] &gt;= pivot){
                  const jCopy = j;
                  const firstCopy = firstElIndex;
                  j--;
                  const arrCopy = array.slice();
                  setTimeout(() =&gt; {
                      drawLines(arrCopy, -1, jCopy,-1, firstCopy);
                  });
              }
  </code></pre>
  
  <p>I already tried setting the wait time like this </p>
  
  <pre><code>setTimeout(() =&gt; {drawLines(arrCopy, iCopy, -1, lastCopy, -1);}, 1000);
  </code></pre>
  
  <p>...but the timeout happens before the calling <code>drawLines()</code> repeatedly without waiting between calls.</p>
  
  <p>I also tried</p>
  
  <pre><code>setTimeout(async() =&gt; {
             drawLines(arrCopy, iCopy, -1, lastCopy, -1);
             await sleep(1000);
  });
  </code></pre>
  
  <p>...with</p>
  
  <pre><code>function sleep(ms) {
    return new Promise((resolve) =&gt; {
      setTimeout(resolve, ms);
    });
  }
  </code></pre>
  
  <p>...but nothing happened</p>
  
  <p>Here is the whole function:</p>
  
  <pre><code>function quickSort(arr, firstElIndex, lastElIndex){
      let array = arr;
      let currentIndex = 0;
      function partition(firstElIndex, lastElIndex) {
          let i = firstElIndex;
          let j = lastElIndex;
          let pivot = array[lastElIndex];
          while(i &lt; j){
              while(i &lt; lastElIndex &amp;&amp; array[i] &lt; pivot){
                  const iCopy = i;
                  const lastCopy = lastElIndex;
                  i++;
                  const arrCopy = array.slice();
                  setTimeout(() =&gt; {
                      drawLines(arrCopy, iCopy, -1, lastCopy, -1);
                  });
              }
  
              while(j &gt; firstElIndex &amp;&amp; array[j] &gt;= pivot){
                  const jCopy = j;
                  const firstCopy = firstElIndex;
                  j--;
                  const arrCopy = array.slice();
                  setTimeout(() =&gt; {
                      drawLines(arrCopy, -1, jCopy,-1, firstCopy);
                  });
              }
  
              if(i &lt; j){
                  array.swap(i, j);
              }
          }
          if(array[i] &gt; pivot){
              array.swap(i, lastElIndex);
          }
          return i;
      }
      if(firstElIndex &lt; lastElIndex){
          currentIndex = partition(firstElIndex, lastElIndex);
          quickSort(array, firstElIndex, currentIndex - 1);
          quickSort(array, currentIndex + 1, lastElIndex);
      }
      setTimeout(() =&gt; {drawLines(array, -1, -1);}, 1000);
  }
  </code></pre>
  
  <p>And here is <code>drawLines()</code>:</p>
  
  <pre><code>function drawLines(arr, x, y, rightPivot, leftPivot){
      let array = arr.slice();
      let container = document.getElementById("centerContent");
      let line = undefined;
      container.innerHTML = '';
      for(let i = 0; i &lt; array.length; i++){
          let my_length = (array[i]/6.7).toString() + "vw";line = document.createElement("div");
          line.className = "line";
          if(i === x || i === y){
              line.style.borderLeft = (1/7).toString() + "vw solid red";
          }
          else if(i === rightPivot){
              line.style.borderLeft = (1/7).toString() + "vw solid aqua";
          }
          else if(i === leftPivot){
              line.style.borderLeft = (1/7).toString() + "vw solid orange";
          }
          else{
              line.style.borderLeft = (1/7).toString() + "vw solid black";
          }        
          line.style.height = my_length;
          container.appendChild(line);
      }
  }
  </code></pre>
  
  <p>I apoligize if the question is poorly structured. It's the my first one. Many thanks in advance.</p>