How to put a delay inside another delay

Question

I am making a board game, it is working all right, however, I would like it to activate mini games according to the position that the player stop.

This is also working, what is not working is the fact that it performs everything before even starting the delay of movement that I use to make the character move.

This is where the movement happens.

var i = 1;                                  //  set your counter to 1
var fimloop;
function myLoop () {                    //  create a loop 
    function setTimeout(function () {               //  call a 3s setTimeout when the loop is called

        posicao++;

        $('#contaPosicoes').val(posicao).trigger('change');
        moveRight(circle,posicao);      //  your code here
        i++;                                //  increment the counter
        if ((i < evt+1)&&(posicao<38)) {  //  if the counter < 10, call the loop function
            myLoop();                       //  ..  again which will trigger another 
        //fimloop = false;
        }                                   //  ..  setTimeout()
    }, 300);
                  fimloop = true;
}

myLoop();

I would like to do anything only after this loop is over.

Answer 1

You can do this way, the code is commented explaining its operation.

//Proxima função
function proximaFuncao(){
  console.log('Executando proximaFuncao');
}

//Usei o contado para simular um loop, mas adapte de acordo com a sua logica 
var contador = 0;

function myLoop () {
    console.log('Executando myLoop');
    setTimeout(function () {
        if (contador<= 3) {
            contador++;
            myLoop();        
        }else{//Condição para a chamada da próxima função
           proximaFuncao();
        } 
    }, 300);
}

myLoop();