title: Force a loop to wait two functions run sequentially
body: <p>I have two functions that must be invoked sequentially within a loop, which in the code will loop 3 times. In the second function I have some animations and I do not know how to make the loop wait for the animation of the second function to end so that the loop goes to the next iteration.</p>
  
  <p>LOOP FUNCTION</p>
  
  <pre><code>function startGame(){
    emptyTab();
  
    $("#movimentos-text").html(0)
    $('.time').show()
    $('.painel-tabuleiro').show();
    $(".btn-reinicio").text("Reiniciar")
  
  
    for(var i = 0; i &lt; 3; i ++){
      generateRandomCandys()
      emptyElements()
    }
  
  }
  </code></pre>
  
  <p>FIRST FUNCTION</p>
  
  <pre><code>function generateRandomCandys(){
      var elements = $(".painel-tabuleiro").children("div");
  
      for (var i = 1; i &lt;= elements.length; i++) {
        for (var j = elements[i-1].childElementCount; j &lt; 7; j++) {
          //... some logic
          }
        }
      }
  }
  </code></pre>
  
  <p>SECOND FUNCTION</p>
  
  <pre><code>function emptyElements(){
      // ... some logic
      $(".equalElement").fadeOut()
      $(".equalElement").fadeIn()
      $(".equalElement").fadeOut()
      $(".equalElement").fadeIn()
      $(".equalElement").fadeOut(function() {
        $(".equalElement").remove()
      })
  }
  </code></pre>
  
  <p>I've already tried using async and await, promise, interval and timeout but nothing worked.
  I want to know how to do this:</p>
  
  <pre><code> for(var i = 0; i &lt; 3; i ++){
      run first: generateRandomCandys()
      run second: emptyElements()
      wait the emptyElements() animations finish to increase i
  }
  </code></pre>