Xtykutl

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.

LOOP FUNCTION

function startGame(){

  emptyTab();



  $("#movimentos-text").html(0)

  $('.time').show()

  $('.painel-tabuleiro').show();

  $(".btn-reinicio").text("Reiniciar")





  for(var i = 0; i < 3; i ++){

    generateRandomCandys()

    emptyElements()

  }



}

FIRST FUNCTION

function generateRandomCandys(){

    var elements = $(".painel-tabuleiro").children("div");



    for (var i = 1; i <= elements.length; i++) {

      for (var j = elements[i-1].childElementCount; j < 7; j++) {

        //... some logic

        }

      }

    }

}

SECOND FUNCTION

function emptyElements(){

    // ... some logic

    $(".equalElement").fadeOut()

    $(".equalElement").fadeIn()

    $(".equalElement").fadeOut()

    $(".equalElement").fadeIn()

    $(".equalElement").fadeOut(function() {

      $(".equalElement").remove()

    })

}

I've already tried using async and await, promise, interval and timeout but nothing worked.
I want to know how to do this:

 for(var i = 0; i < 3; i ++){

    run first: generateRandomCandys()

    run second: emptyElements()

    wait the emptyElements() animations finish to increase i

}

If you are OK with using await then you could chain the jQuery .promise() method, like this:

async function startGame(){

//^^^^

  emptyTab();



  $("#movimentos-text").html(0)

  $('.time').show()

  $('.painel-tabuleiro').show();

  $(".btn-reinicio").text("Reiniciar")



  for(var i = 0; i < 3; i ++){

    generateRandomCandys()

    await emptyElements()

  //^^^^^

  }

}

Second function:

async function emptyElements(){

//^^^^

    return $(".equalElement").fadeOut().fadeIn().fadeOut().fadeIn().fadeOut()

    //^^^^

                      .promise().then(()=> $(".equalElement").remove())

                    //^^^^^^^^^^^^^^^^

}

You can use some sort of recursion as @Felix Kling suggested.

Then, to avoid triggering the callback for every .equalElement object, use $.when():

Provides a way to execute callback functions based on zero or more Thenable objects, usually Deferred objects that represent asynchronous events.

var iteration = 0;



function showCandys() {

  generateRandomCandys();

  emptyElements();

}



function generateRandomCandys() {

  $("div div").each(function() {

    if (Math.random() <= 0.5) {

      var candy = $("<span></span>").text("CANDY").addClass("equalElement");

      $(this).append(candy);

    }

  });

}



function emptyElements() {

  $.when($(".equalElement").fadeIn().fadeOut().fadeIn().fadeOut()).then(function() {

    $(".equalElement").remove();

    iteration++;

    if (iteration < 3) showCandys();

  })

}



showCandys();

div div {

  width: 100px;

  height: 100px;

  border: 1px solid red;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>

  <div></div>

  <div></div>

  <div></div>

</div>