Htykuut

I'm having an issue with delaying the execution of funcRemove till after the alert fires.

I tried using setTimeout but then I keep getting an error stating that the remove property doesn't exist. How do I accomplish delaying the execution of funcRemove till after the alert fires?

const listAddCard = document.querySelectorAll('.card');
const moveElem = document.querySelector('.moves');

let turnCheck = 0;

let cardChecker = '';

let prevCard = '';

let moves = 3;



let matchCheck = function(evtObj){

  funcShow(evtObj);  

  console.log(turnCheck);

     if(turnCheck===1){

        setTimeout(function(){}, 1000);

        if(evtObj.target.innerHTML===cardChecker){

            evtObj.target.classList.add('match');

            prevCard.classList.add('match');

        }

        else{



            alert('No match');

        }

        funcRemove(prevCard, evtObj);

        turnCheck = 0;

        cardChecker = '';

        prevCard = '';

        moves++;

        moveElem.innerHTML = moves;

        return;

     }

     prevCard = evtObj.target;

     cardChecker = evtObj.target.innerHTML;

     turnCheck++;

 }



 let funcShow = function(e){

    e.target.classList.add('open', 'show');

    console.log('funcShow');

 }



const cardDeck = document.querySelectorAll('.card');

 for(var i=0;i<cardDeck.length;i++){

     cardDeck[i].addEventListener('click', matchCheck);

    }



let funcRemove = function (p1,p2){



        setTimeout(function(){}, 1000);    

        p1.classList.remove('open', 'show');

        p2.target.classList.remove('open', 'show');

}

setTimeout is an asynchronous function which means that it is executed in parallel. You need to put the code that you want to run after the 1000ms delay inside of the function in setTimeout. For example:

console.log("Print #1");

setTimeout(function() {

    console.log("Print me after 1000ms");

}, 1000);

console.log("Print #2");

"Print 2" will print right after "Print 1" while the "Print me after 1000ms" will be printed later.

Furthermore, you can't simply return inside of setTimeout. Whatever you put inside of setTimeout is part of a callback function: https://developer.mozilla.org/en-US/docs/Glossary/Callback_function.

To make use of callbacks and setTimeout correctly in your case, here's what you want to do:

let funcRemove = function (p1,p2, callback){

    p1.classList.remove('open', 'show');

    p2.target.classList.remove('open', 'show');

    setTimeout(callback, 1000);    

}

In matchCheck:

let matchCheck = function(evtObj){

funcShow(evtObj);  

console.log(turnCheck);

   if(turnCheck===1){

      setTimeout(function(){}, 1000);

      if(evtObj.target.innerHTML===cardChecker){

          evtObj.target.classList.add('match');

          prevCard.classList.add('match');

      }

      else{

          alert('No match');

      }

      funcRemove(prevCard, evtObj, function() {

          // this part is executed 1000ms later

          turnCheck = 0;

          cardChecker = '';

          prevCard = '';

          moves++;

          moveElem.innerHTML = moves;

      })



      return;

   }

   prevCard = evtObj.target;

   cardChecker = evtObj.target.innerHTML;

   turnCheck++;

}