Pfthb

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>