如何在setTimeout结束前阻止操作？记忆游戏点击故障求助

我来帮你搞定这个问题！你遇到的核心问题是没有在处理两张翻开卡牌的间隙阻止后续点击，导致用户可以连续点击多张卡牌，打乱了游戏逻辑，最终让游戏崩溃。

问题根源 #

当前的代码每次点击卡牌都会直接添加open show类，完全没有限制——哪怕已经有两张卡牌处于翻开状态，用户还是能继续点击其他卡牌。加上setTimeout的延迟，这段时间内积累的多张翻开卡牌会让匹配逻辑彻底混乱。

解决方案：添加状态锁 #

我们可以引入一个锁定状态变量，在处理两张卡牌的匹配/不匹配过程中，暂时禁止用户点击其他卡牌，等动画结束后再恢复可点击状态。具体改动如下：

1. 新增一个全局变量isLocked，用来标记当前是否处于不可操作状态
2. 在卡牌点击事件开头，先判断是否锁定或点击的是已匹配卡牌，直接拦截无效操作
3. 当翻开两张卡牌时，立即锁定状态，阻止后续点击
4. 等匹配判断和动画完成后，再解锁状态

修改后的完整代码 #

let isLocked = false; // 标记游戏是否处于锁定状态，禁止点击

restart(); 
bindcards(); 

// 重启游戏逻辑
function restart() {
 $('.restart').on('click', function () {
  cards = shuffle($('.card'));
  $(".card").each(function() {
   $( this ).removeClass( "open match show" );
  });
  $('.deck').html(cards);
  isLocked = false; // 重启时重置锁定状态
  bindcards();
 });
}

// 绑定卡牌点击事件
function bindcards(){
 $('.card').click(function () {
  // 1. 如果当前处于锁定状态，直接返回，不处理点击
  if (isLocked) return;
  // 2. 点击已匹配的卡牌，直接返回
  if ($(this).hasClass('match')) return;

  $(this).addClass('open show');
  let openCards = $('.open');
  let list = jQuery.makeArray(openCards);
  
  // 当翻开了两张卡牌时
  if (list.length === 2) {
   isLocked = true; // 立即锁定，禁止继续点击

   // 判断两张卡牌是否匹配
   if (list[0].innerHTML === list[1].innerHTML){
    $(openCards).addClass('match');
   }

   // 延迟处理卡牌状态
   setTimeout(() => {
    // 不匹配的卡牌翻回去，匹配的卡牌保留match类，移除open/show
    if (!$(openCards).hasClass('match')) {
     $(openCards).removeClass('open show');
    } else {
     $(openCards).removeClass('open show');
    }
    isLocked = false; // 处理完成，解锁允许再次点击
   }, 1000);
  }
 });
}

额外优化点 #

• 增加了对已匹配卡牌的点击拦截，避免用户重复点击已经锁定的卡牌
• 重启游戏时重置锁定状态，确保新游戏可以正常开始操作

这样修改后，用户在处理两张卡牌的1秒延迟期间，无法点击其他卡牌，彻底解决了游戏混乱崩溃的问题~

内容的提问来源于stack exchange，提问作者Stiven Lancheros