Jquery waits for the function to end to display an image. How to resolve?

Question

Oops, I’m doing a project of a memory game that requires an image to be changed at the time of a click using Jquery.

The game is based on clicking on divs, and display the images inside them, two at a time. If they are equal, they stay on display, if they are different they are hidden.

By clicking on the first div, the image within it is displayed normally by clicking on the second div, the system checks if the images are the same, if yes, they stay the sample, otherwise the system hides the two images clicked a few seconds later.

But this probably doesn’t happen because the image only loads at the end of the click function div. ( code below).

$(".card").click(function () {
        tent++;
        var idCard = $(this).attr('id');
        revelarImg(idCard);
        desabilitarClick(idCard);

        if (tent == 2) {
            if (ganhou(primTent, idCard)) {
                pontuacao++;
                if (pontuacao == 9)
                    gameWin();
            }
            else {
                setTimeout(esconderCards(primTent, idCard), 3000);
                habilitarClicks(primTent, idCard);
            }
            tent = 0;
        }
        else {
            primTent = idCard;
        }

    });

Note that the function that reveals the image is called in every click, but the change is only actually made at the end of the function. If the user made a mistake ( when it is his second attempt), the function is called esconderCards() which cancels the other which discloses them. ( functions codes below )

function revelarImg(id) {
    $("#" + id +"> img").attr("src", arrayImgs[id]);
     }

    function esconderCards(primeira, segunda) {
    $("#" + primeira +"> img").attr("src","imgs/front.png");
    $("#" + segunda +"> img").attr("src","imgs/front.png");

Follows the html of divs with the pictures:

<div class="card" id="0">
            <img src="imgs/front.png">
        </div>
        <div class="card" id="1">
                <img src="imgs/front.png">
        </div>
        ...

How can I display the second image without waiting for the function to end and if "auto cancel"?

Answer 1

I made a very simple example, I did not use an array because I found it unnecessary and put a function Callback in the image view, to display the message to the winner after the image display

I used the functions fadein | fadeOut.

var tentativa = 0;
var cardSelecionadoPrimeiraTentativa = "";
var idCardSelecionadoPrimeiraTentativa = "";

$(".card").on("click", function(){
  //obtenho o cardSelecionado:
  var cardSelecionado = $(this).attr('data-img');
  var idCardSelecionado = $(this).attr('id');
  
  //Oculto o label e exibo a imagem do card selecionado
  $(this).children("label").hide();
  
  //utilizo a função fadeIn e defino uma funcao de callback, ou seja, uma função que será executada somente após o encerramento da animação.
  $(this).children("img").fadeIn(1400, function(){
    Tentativa(cardSelecionado, idCardSelecionado)
  });
  
});

function Tentativa(cardSelecionado, idCardSelecionado){
  tentativa++
  if(tentativa == 2){    
    if(cardSelecionadoPrimeiraTentativa == cardSelecionado
          && idCardSelecionadoPrimeiraTentativa != idCardSelecionado)
      {
        alert("Ganhou!!")
      }
    //Escondo campos e limpo as variaveis
    $(".card>img").fadeOut("slow", Limpar());
  }else{
    cardSelecionadoPrimeiraTentativa = cardSelecionado;
    idCardSelecionadoPrimeiraTentativa = idCardSelecionado;
  }
}
function Limpar(){
  $(".card>label").show();
  tentativa = 0;
  cardSelecionadoPrimeiraTentativa = "";
  idCardSelecionadoPrimeiraTentativa = ""
}

.card {
  border: 1px solid;
}
.card > img {
  width: 25px;
  display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="card" data-img="troll" id="1">
  <label>CARD 1</label>
  <img src="https://i.imgur.com/jWr67J8.png?1" alt="Meme Troll" />
</div>
<div class="card" data-img="challenge" id="2">
  <label>CARD 2</label>
  <img src="https://i.imgur.com/U3ZiZvu.jpg" class=".card" alt="Meme challenge"/>
</div>
<div class="card" data-img="challenge" id="3">
  <label>CARD 3</label>
  <img src="https://i.imgur.com/U3ZiZvu.jpg" class=".card" alt="Meme challenge"/>
</div>
<div class="card" data-img="troll" id="4">
  <label>CARD 4</label>
  <img src="https://i.imgur.com/jWr67J8.png?1" alt="Meme Troll"/>
</div>