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张开卡。

这是您的codepen

需要等待setInterval进程才能完成

1 个答案: