Trying to add a delay in code execution(before an alert occurs)

Question

I'm trying to add a delay before an alert statement executes. However, an entire code block is being delayed instead of just the part after the wait(1000) function call. How do I configure this so only the code AFTER the wait function is delayed?

function wait(ms) {
    var start = Date.now(),
        now = start;
    while (now - start < ms) {
      now = Date.now();
    }
}

function cardChecker(e){
    if(e.target===prevElement){
      alert('Please select another square!');
      return;
    }
    e.target.firstChild.classList.toggle('hide');
    if(cardCheckCount===1){
      moves++;
      if(moves===1){
        moveHTML.innerHTML = moves + ' move';}
        else{moveHTML.innerHTML = moves + ' moves';}
        if(e.target.innerHTML=== prevElement.innerHTML){
          wait(1000);
          prevElement='';
          cardCheckCount=0;
          moveChecker++;
          alert('Match!');
          if(moveChecker===8){
            alert('Congrats, you\'ve finished in ' + timer.getTimeValues().toString() + '!!! To play again, please press the reload button on the top right!');
            timer.stop();
            for (var i = 0; i < card.length; i++) {
              card[i].removeEventListener('click', theListener, true);}
              return;
            }
            return;
          }
          else{
            wait(1000);
            alert('No Match!');
            prevElement.firstChild.classList.toggle('hide');
            e.target.firstChild.classList.toggle('hide');
            prevElement='';
            cardCheckCount=0;

            return;
          }
        }
        prevElement = e.target;
        cardCheckCount++;
      }


     

Answer 1

Place the code that you want delayed inside of a setTimeout() as shown below:

function wait(ms) {
    var start = Date.now(),
        now = start;
    while (now - start < ms) {
      now = Date.now();
    }
}

function cardChecker(e){
    if(e.target===prevElement){
      alert('Please select another square!');
      return;
    }
    e.target.firstChild.classList.toggle('hide');
    if(cardCheckCount===1){
      moves++;
      if(moves===1){
        moveHTML.innerHTML = moves + ' move';}
        else{moveHTML.innerHTML = moves + ' moves';}
        if(e.target.innerHTML=== prevElement.innerHTML){
          wait(1000);
          prevElement='';
          cardCheckCount=0;
          moveChecker++;
          alert('Match!');
          if(moveChecker===8){
            alert('Congrats, you\'ve finished in ' + timer.getTimeValues().toString() + '!!! To play again, please press the reload button on the top right!');
            timer.stop();
            for (var i = 0; i < card.length; i++) {
              card[i].removeEventListener('click', theListener, true);}
              return;
            }
            return;
          }
          else{
            // Count to 1000 ms and then wait until all other code has finished running
            // then run the callback function.
            setTimeout(function(){
              alert('No Match!');          
            }, 1000);
            
            // This code will execute before the timer's callback function
            prevElement.firstChild.classList.toggle('hide');
            e.target.firstChild.classList.toggle('hide');
            prevElement='';
            cardCheckCount=0;  
            return;
          }
        }
        prevElement = e.target;
        cardCheckCount++;
      }

Answer 2

There is no need for another function for just waiting.

Just do a setTimeout() in the plcae you are calling your wait()

setTimeout(() => {alert("Match!"); ... /*other code*/}, 1000)