javascript - 需要等待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 张公开牌。

这是您的codepen