时间戳

首页 > 解决方案 > 需要等待 setInterval 过程完成

javascript - 需要等待 setInterval 过程完成

问题描述

完整代码在这里；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);

标签： javascriptjqueryhtmldom

解决方案

您应该删除它，setInterval因为它总是在三秒后触发。您只想unflip()在比较后调用该方法。所以你需要使用一个setTimeout(). 现在该unflip()方法仅在选择 2 张卡后调用。请注意，该unflip()函数嵌套在function() { }. 否则超时不会生效。

我还将您的if条款从更改openedCardsList.length <= 2为，openedCardsList.length < 2因为您只想拥有最多 2 张打开的卡片。

这是你的密码笔

推荐阅读