DOM 元素更新非常慢

Question

我正在编写这个初学者石头剪刀布游戏。添加了事件监听器。不知怎的，它的工作方式非常奇怪。

当我点击武器时，每次点击之间有大约 2 秒或更长的延迟 - 它工作正常，但是当我非常快地点击它们时，我的玩家的武器和分数更新非常慢，或者有时不事件更新，并且没有任何变化。

我尝试将代码中的变量声明从全局范围替换为函数范围，但效果仍然相同。

const weapons = document.querySelectorAll(".weapons__img");
const playerWeaponSpan = document.getElementById("playerWeapon");
const computerWeaponSpan = document.getElementById("computerWeapon");
const playerScoreSpan = document.getElementById("playerScore");
const computerScoreSpan = document.getElementById("computerScore");

let playerScore = 0;
let computerScore = 0;

const getComputerWeapon = function() {
  const randomNum = Math.floor(Math.random() * 15) + 1;
  if (randomNum <= 5) {
    return "rock";
  } else if (randomNum <= 10) {
    return "scissors";
  } else if (randomNum <= 15) {
    return "paper";
  } else {
    return "ERROR";
  }
};

weapons.forEach((weapon) => {
  weapon.addEventListener("click", (event) => {
    const playerWeapon = weapon.id;
    const computerWeapon = getComputerWeapon();
    if (playerWeapon === "paper" && computerWeapon === "rock") {
      playerWeaponSpan.textContent = "Paper";
      computerWeaponSpan.textContent = "Rock";

      playerScore++;
    } else if (playerWeapon === "paper" && computerWeapon === "scissors") {
      playerWeaponSpan.textContent = "Paper";
      computerWeaponSpan.textContent = "Scissors";
      computerScore++;
    } else if (playerWeapon === "scissors" && computerWeapon === "paper") {
      playerWeaponSpan.textContent = "Scissors";
      computerWeaponSpan.textContent = "Paper";
      playerScore++;
    } else if (playerWeapon === "scissors" && computerWeapon === "rock") {
      playerWeaponSpan.textContent = "Scissors";
      computerWeaponSpan.textContent = "Rock";
      computerScore++;
    } else if (playerWeapon === "rock" && computerWeapon === "scissors") {
      playerWeaponSpan.textContent = "Rock";
      computerWeaponSpan.textContent = "Scissors";
      playerScore++;
    } else if (playerWeapon === "rock" && computerWeapon === "paper") {
      playerWeaponSpan.textContent = "Rock";
      computerWeaponSpan.textContent = "Paper";
      computerScore++;
    }
    playerScoreSpan.textContent = playerScore;
    computerScoreSpan.textContent = computerScore;
  });
});

<header class="header">
  <h1 class="header__heading">Welcome to Rock-Paper-Scissors Game</h1>
  <p>In order to win you need to score up to 5 points</p>
  <p>Pick one of three weapons:</p>
</header>
<main class="main">
  <section class="weapons">
    <div class="weapons__images">
      <img src="https://mgarcia-rps.netlify.app/Paper_1.png" alt="Image #1" id="paper" class="weapons__img" />
      <img src="https://mgarcia-rps.netlify.app/Scissors_1.png" alt="Image #2" id="scissors" class="weapons__img" />
      <img src="https://mgarcia-rps.netlify.app/Rock_1.png" alt="Image #3" id="rock" class="weapons__img" />
    </div>
  </section>
  <section class="score">
    <div class="score__text">
      <div class="score__numbers">
        <p>
          Player <span id="playerScore">0</span> &mdash;
          <span id="computerScore">0</span> Computer
        </p>
      </div>

      <div class="score__weapons">
        <p>Player's Weapon: <span id="playerWeapon">?</span></p>
        <p>Computer's Weapon: <span id="computerWeapon">?</span></p>
      </div>
    </div>
  </section>
</main>

Answer 1

我在代码中看到的唯一问题是你没有处理计算机和用户选择相同武器的情况。

因此，每当他们“绑定”时，用户界面什么都不做，看起来好像没有发生点击。