石头剪刀布蜥蜴史波克游戏setInterval重复触发问题求助

我是JavaScript新手，正在开发《石头剪刀布蜥蜴史波克》游戏。目前遇到一个问题：多次点击“Next round”按钮后，emoji的洗牌速度会变快，且点击emoji也无法清除对应的setInterval。我曾尝试用for循环在每次重复点击按钮时清除interval，但仍不知如何解决，恳请提供建议。

核心问题分析 #

每次点击"Next round"时，你都会创建新的setInterval，但未清除之前运行的定时器。旧定时器不会自动停止，会在后台持续触发shuffleEmojis，多个定时器同时工作就会让洗牌速度看起来变快。同时shuffleIntervalID只保存最后一个定时器的ID，导致之前的定时器无法被clearInterval清除。

修复要点 #

1. 创建新定时器前先清除旧定时器：在nextRoundBtn函数中，每次调用setInterval前先执行clearInterval(shuffleIntervalID)，确保始终只有一个定时器在运行。
2. 清理重复逻辑：handlePlayerChoice中重复调用了determineWinner()，删除其中一次避免重复计算分数。
3. 完善收尾逻辑：游戏结束时也需清除定时器，避免不必要的后台运行。

修改后的JavaScript代码 #

// ----------------------GAME----------------------
// Add active class to the current button (highlight it)
var header = document.getElementById("player-choice-container");
var btns = header.getElementsByClassName("emoji");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
  });
}

// Counting score 
let playerScore = 0;
let computerScore = 0;
let moves = 0;

let userChoice = "";
let computerChoice = "";

let emojis = ["✂️ ", "📄", "🪨", "🦎", "🖖🏻"];
let currentEmojiNumber = 0;

let shuffleIntervalID;

let userChoiceContainer = document.querySelector("#player-choice-container");
let emojiShuffleElement = document.querySelector("#emoji-shuffle");


userChoiceContainer.addEventListener("click", handlePlayerChoice);

// Function to get player choice
function handlePlayerChoice(event) {
  if (!event.target.classList.contains("emoji") || moves >= 10) return;
  userChoice = event.target.textContent;
  clearInterval(shuffleIntervalID);
  moves++;
  document.querySelector('.movesleft').innerText = `Moves Left: ${10 - moves}`;
  determineWinner();
  if (moves == 10) {
    gameOver();
  }
}

// Function to generate computer and user choice
let nextRound = document.getElementById('next-round');
nextRound.addEventListener('click', nextRoundBtn);

// Function to reset user and computer choice and pick choice again
function nextRoundBtn() {
  // 先清除旧定时器，再创建新的
  clearInterval(shuffleIntervalID);
  shuffleIntervalID = setInterval(shuffleEmojis, 150);
}

function playerEmojis() {
  playAgainEmoji = getElementById('player-choice-container');
  userChoiceContainer.textContent = playAgainEmoji;
}

// Function to return a random emoji from the dictionary and generate computer choice.
function shuffleEmojis() {
  computerChoice = emojis[currentEmojiNumber];
  emojiShuffleElement.textContent = computerChoice;

  if (currentEmojiNumber < emojis.length - 1) {
    currentEmojiNumber++;
  } else {
    currentEmojiNumber = 0;
  }
}

// Function to compare user and computer choices and determine game winner.
function determineWinner() {
  let gameResultMessageElement = document.querySelector("#game-result-message");
  let gameResultMessage = "";
  let playerScoreBoard = document.querySelector('.p-count');
  let computerScoreBoard = document.querySelector('.c-count');

  if (userChoice === computerChoice) {
    gameResultMessage = "It's a tie!";
    playerScore += 0;
    playerScoreBoard.textContent = playerScore;
    computerScore += 0;
    computerScoreBoard.textContent = computerScore;

  } else if (userChoice === "🪨" && computerChoice === "✂️ ") {
    gameResultMessage = 'Rock crushes scissors. You win !';
    playerScore += 1;
    playerScoreBoard.textContent = playerScore;
  } else if (userChoice === "✂️ " && computerChoice === "🪨") {
    gameResultMessage = 'Rock crushes scissors ! You lose';
    computerScore += 1;
    computerScoreBoard.textContent = computerScore;

  } else if (userChoice === "📄" && computerChoice === "🪨") {
    gameResultMessage = 'Paper covers rock. You win !';
    playerScore += 1;
    playerScoreBoard.textContent = playerScore;
  } else if (userChoice === "🪨" && computerChoice === "📄") {
    gameResultMessage = 'Paper covers rock ! You lose';
    computerScore += 1;
    computerScoreBoard.textContent = computerScore;

  } else if (userChoice === "✂️ " && computerChoice === "📄") {
    gameResultMessage = 'Scissors cut paper. You win !';
    playerScore += 1;
    playerScoreBoard.textContent = playerScore;
  } else if (userChoice === "📄" && computerChoice === "✂️ ") {
    gameResultMessage = 'Scissors cut paper ! You lose';
    computerScore += 1;
    computerScoreBoard.textContent = computerScore;

  } else if (userChoice === "🦎" && computerChoice === "📄") {
    gameResultMessage = 'Lizard eats paper. You win !';
    playerScore += 1;
    playerScoreBoard.textContent = playerScore;
  } else if (userChoice === "📄" && computerChoice === "🦎") {
    gameResultMessage = 'Lizard eats paper ! You lose';
    computerScore += 1;
    computerScoreBoard.textContent = computerScore;

  } else if (userChoice === "✂️ " && computerChoice === "🦎") {
    gameResultMessage = 'Scissors decapitate lizard. You win !';
    playerScore += 1;
    playerScoreBoard.textContent = playerScore;
  } else if (userChoice === "🦎" && computerChoice === "✂️ ") {
    gameResultMessage = 'Scissors decapitate lizard! You lose';
    computerScore += 1;
    computerScoreBoard.textContent = computerScore;

  } else if (userChoice === "🪨" && computerChoice === "🦎") {
    gameResultMessage = 'Rock crushes lizard. You win !';
    playerScore += 1;
    playerScoreBoard.textContent = playerScore;
  } else if (userChoice === "🦎" && computerChoice === "🪨") {
    gameResultMessage = 'Rock crushes lizard ! You lose';
    computerScore += 1;
    computerScoreBoard.textContent = computerScore;

  } else if (userChoice === "🖖🏻" && computerChoice === "🪨") {
    gameResultMessage = 'Spock vaporizes rock. You win !';
    playerScore += 1;
    playerScoreBoard.textContent = playerScore;
  } else if (userChoice === "🪨" && computerChoice === "🖖🏻") {
    gameResultMessage = 'Spock vaporizes rock ! You lose';
    computerScore += 1;
    computerScoreBoard.textContent = computerScore;

  } else if (userChoice === "📄" && computerChoice === "🖖🏻") {
    gameResultMessage = 'Paper disproves Spock. You win !';
    playerScore += 1;
    playerScoreBoard.textContent = playerScore;
  } else if (userChoice === "🖖🏻" && computerChoice === "📄") {
    gameResultMessage = 'Paper disproves Spock ! You lose';
    computerScore += 1;
    computerScoreBoard.textContent = computerScore;

  } else if (userChoice === "🖖🏻" && computerChoice === "✂️ ") {
    gameResultMessage = 'Spock crushes scissors. You win !';
    playerScore += 1;
    playerScoreBoard.textContent = playerScore;
  } else if (userChoice === "✂️ " && computerChoice === "🖖🏻") {
    gameResultMessage = 'Spock crushes scissors ! You lose';
    computerScore += 1;
    computerScoreBoard.textContent = computerScore;

  } else if (userChoice === "🦎" && computerChoice === "🖖🏻") {
    gameResultMessage = 'Lizard poisons Spock. You win !';
    playerScore += 1;
    playerScoreBoard.textContent = playerScore;
  } else if (userChoice === "🖖🏻" && computerChoice === "🦎") {
    gameResultMessage = 'Lizard poisons Spock ! You lose';
    computerScore += 1;
    computerScoreBoard.textContent = computerScore;
  }

  gameResultMessageElement.textContent = gameResultMessage;
}

// Function to end the game and determine final winner.
function gameOver() {
  clearInterval(shuffleIntervalID); // 游戏结束时清除定时器
  if (playerScore > computerScore) {
    window.location.href = "win.html";
  } else {
    window.location.href = "lose.html";
  }
}

// 初始化启动定时器
shuffleIntervalID = setInterval(shuffleEmojis, 150);


//------------------------GAME OVER---------------------------------
// Function to play again game and redirect it to game.html
function playAgain() {
  window.location.href = "game.html";
};

HTML代码（无需修改） #

<main>
  <div class="game-container">
    <p>Player</p>
    <!--Options available to player to play game -->
    <div class="choice-container" id="player-choice-container">
      <p class="emoji active">🪨</p>
      <p class="emoji">📄</p>
      <p class="emoji">✂️ </p>
      <p class="emoji">🦎</p>
      <p class="emoji">🖖🏻</p>
    </div>
  </div>

  <h2 id="vs">VS</h2>

  <!--Computer choice -->
  <div class="game-container">
    <p>Computer</p>
    <div class="choice-container">
      <p class="emoji" id="emoji-shuffle"></p>
    </div>
  </div>
</main>

<!--Result of game -->
<div id="game-result-message"></div>

<!--Final result of game -->
<div class="result"></div>

<!--Display Score of player and computer -->
<div class="score">
  <div class="playerScore">
    <h2>Player</h2>
    <p class="p-count count">0</p>
  </div>
  <!-- Next round button for user to pick his choice and computer to generate new one-->
  <div><button id="next-round">Next round</button></div>

  <div class="computerScore">
    <h2>Computer</h2>
    <p class="c-count count">0</p>

  </div>
</div>

<!--Number of moves left before game ends -->
<div class="movesleft" id="moves-l">Moves Left: 10 </div>
</section>

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