如何停止并重新激活EventListener？记忆卡牌游戏点击事件问题求助

嘿，我看了你的代码，发现几个关键问题导致它没法正常工作，同时结合你说的记忆卡牌游戏需求，给你整理了修复后的方案：

原代码的核心问题 #

• 拼写错误：setTimeOut应该是setTimeout（注意是小写的t，这个拼写错误会直接导致定时器不生效）
• 无效的事件绑定：重新激活点击时你写了$('.card').on('click');，但没有传入处理函数，等于没真正绑定点击逻辑
• 逻辑冗余：每次点击都会触发setTimeout，会导致多次重复绑定事件，而且点击计数的逻辑也容易混乱

修复后的基础版本代码 #

这个版本实现了「点击两次后禁用点击1秒，之后重新激活」的核心逻辑：

let clicks = 0;
// 把点击处理逻辑抽成单独函数，方便绑定/移除
const handleCardClick = function() {
  // 如果当前处于禁用状态，直接忽略点击
  if ($(this).data('is-disabled')) return;

  clicks++;
  
  // 这里可以添加「翻开卡牌」的逻辑，比如：
  // $(this).addClass('flipped');

  if (clicks === 2) {
    // 移除所有卡牌的点击事件，并标记为禁用
    $('.card').off('click', handleCardClick).data('is-disabled', true);
    
    // 1秒后重新激活点击
    setTimeout(function() {
      $('.card').on('click', handleCardClick).data('is-disabled', false);
      clicks = 0; // 重置点击计数，准备下一轮
      
      // 这里可以添加「不匹配时翻回卡牌」的逻辑，比如：
      // $('.card.flipped').removeClass('flipped');
    }, 1000);
  }
};

// 初始化绑定点击事件
$('.card').on('click', handleCardClick);

贴合记忆卡牌游戏的增强版本 #

结合你补充的「点击第二张不匹配则禁用点击」的需求，我们可以加入卡牌匹配判断的逻辑：

let clicks = 0;
let openedCards = []; // 存储当前翻开的两张卡牌

const handleCardClick = function() {
  // 跳过已禁用、已翻开的卡牌
  if ($(this).data('is-disabled') || $(this).hasClass('flipped')) return;

  clicks++;
  $(this).addClass('flipped');
  openedCards.push(this);

  if (clicks === 2) {
    // 先禁用所有点击
    $('.card').off('click', handleCardClick).data('is-disabled', true);
    
    // 判断两张卡牌是否匹配（假设你用data-card属性存卡牌值）
    const isMatch = $(openedCards[0]).data('card') === $(openedCards[1]).data('card');

    setTimeout(function() {
      if (!isMatch) {
        // 不匹配的话，把卡牌翻回去
        $(openedCards).removeClass('flipped');
      }
      // 重新激活点击，重置状态
      $('.card').on('click', handleCardClick).data('is-disabled', false);
      clicks = 0;
      openedCards = [];
    }, 1000);
  }
};

// 初始化绑定
$('.card').on('click', handleCardClick);

关键优化点说明 #

• 把点击处理函数抽成独立的handleCardClick，这样绑定和移除事件时更清晰，避免重复代码
• 用data('is-disabled')标记卡牌状态，防止禁用期间的无效点击干扰计数
• 点击到第2次时统一禁用点击，1秒后再重新激活，避免原代码中多次触发定时器的问题
• 修正了setTimeout的拼写错误，确保定时器正常执行

内容的提问来源于stack exchange，提问作者Molham Al Nasr