Запретить действия до завершения setTimeout ()

Question

Я сейчас играю в память, и если две карты совпадают, это блокирует их, но если нет, то они должны вернуться назад.Проблема в том, что вы можете нажимать на другие карты, даже если две карты уже перевернуты, и если вы нажимаете больше карт, игра сходит с ума и перестает работать. Любая идея?

вот код https://codepen.io/stivennpe/pen/KRxvxR?editors=1010

    restart ();
    bindcards();


    // to restart the game and shuffle the cards
    function restart() {
    $('.restart').on('click', function () {
    cards = shuffle($('.card'));
    $(".card").each(function() {
          $( this ).removeClass( "open match show" );
      });
      $('.deck').html(cards);
      bindcards();
    });
    }



    //to open/show the card
    function bindcards(){

      $('.card').click(function () {
     $(this).addClass('open show');
         let openCards = $('.open');
         let list = jQuery.makeArray(openCards);



         if (list.length === 2 && list[0].innerHTML ===
     list[1].innerHTML){
         $(openCards).addClass('match');
         }
         if (list.length === 2) {
           setTimeout(hola, 1000)
          function hola() {$(openCards).removeClass('open show');
         }
         }


     });
    }

спасибо

Answer 1

Существует условие гонки между применением класса .open к элементу div, обновлением страницы, запросом этого элемента и тем, как пользователь ускоряет свой путь через вашу игру.Вместо того, чтобы добавлять класс .open к div, надеясь, что страница обновится достаточно быстро, а затем немедленно запросить у вас, чтобы узнать, сколько у вас открытых карт, сохраните счетчик локальных переменных.Ниже приведено небольшое изменение вашего кода

    function bindcards() {
  let numOfOpenCards = 0;
  $(".card").click(function(e) {
    ++numOfOpenCards;

    if(numOfOpenCards > 2)
      return;

    $(this).addClass("open show");

    let openCards = $(".open");
    let list = jQuery.makeArray(openCards);

    if (numOfOpenCards >= 2 && list && list.length >= 2 && list[0].innerHTML === list[1].innerHTML) {
      $(openCards).addClass("match");       
    }

    if (numOfOpenCards >= 2) {
      setTimeout(hola, 1000);
      function hola() {
        numOfOpenCards = 0;

        let openCards = $(".open"); 
        let list = jQuery.makeArray(openCards);
        if(list) {
          for(let i = 0; i < list.length; ++i)
            $(list[i]).removeClass("open show");
        }
      }
    }
  });
}

Если две карты уже открыты, проверка самой последней карты.Предыдущая проверка карты должна по-прежнему завершаться и обновляться по мере необходимости.

https://codepen.io/anon/pen/NzPBrB?editors=1010

Дополнительное редактирование Если вы не хотите использовать numOfOpenCards, вы можете использовать следующее.Найдите, сколько уже открыто.Если их уже больше 2, просто выйдите.Если их уже меньше, добавьте класс, а затем снова запросите DOM.Везде, где используется numOfCards, вы можете заменить на list.length;

let openCards = $(".open");
let list = jQuery.makeArray(openCards);

if(list && list.length > 2)
  return;

$(this).addClass("open show");

openCards = $(".open");
list = jQuery.makeArray(openCards);
if (list.length >= 2) {
      setTimeout(hola, 1000);
      function hola() {
        $(list).removeClass('open show');
      }
}

Answer 2

Похоже, что для простого решения вы можете установить глобальную переменную, например, blockClicks

Если blockClicks имеет значение true, ничего не делать, когда пользователь щелкает.Сбросить его значение на ложное после тайм-аута