Необходимо дождаться завершения процесса setInterval

Question

Полный код здесь;https://codepen.io/3noki/pen/xjyErQ?editors=0011

Я хочу, чтобы, когда две карты открыты, сделать паузу, а затем перевернуть их, если не совпадают.Но в настоящее время я могу продолжать нажимать, пока этот интервал работает / до того, как карты перевернутся, что вызывает проблемы.

Есть ли способ сделать все или новый щелчок, чтобы дождаться завершения интервала?

$(".card").on("click", function cardFlip() {
  if (!this.classList.contains('open') && openedCardsList.length <= 2) {
    this.classList.toggle('open');
    openedCardsList.push(this);
    if ( openedCardsList.length == 2) {
    checkForMatch();
    }else {}
  }
  else {}
});

function checkForMatch() {
    let a = $('i.fa', openedCardsList[0]).data('fa');
    let b = $('i.fa', openedCardsList[1]).data('fa');
    let eq = ( a && b && a === b );
    if (eq) {     
      $(openedCardsList[0]).removeClass('open').addClass('match');
      $(openedCardsList[1]).toggleClass('open match');
      openedCardsList = [];
      matched++;
    }
  else {unFlip();}
}

setInterval( function unFlip() {
  openedCardsList[0].classList.toggle('open');
  openedCardsList[1].classList.toggle('open');
  openedCardsList = [];
}, 3000);

Answer 1

Вы должны удалить setInterval, поскольку всегда срабатывает через три секунды.Вы хотите вызывать метод unflip() только после сравнения.Так что вам нужно будет использовать setTimeout().Теперь метод unflip() вызывается только после выбора 2 карт.Обратите внимание, что функция unflip() вложена в function() { }.В противном случае тайм-аут не будет иметь никакого эффекта.

Я также изменил ваше предложение if с openedCardsList.length <= 2 на openedCardsList.length < 2, поскольку вы хотите иметь максимум 2 открытых карты.

Вот ваш кодовый блок