在显示您赢得的警报之前，我的on子手游戏不会显示完整的单词

Question

我花了一百万小时试图弄清楚为什么我的话在提醒您赢了之前没有完全显示出来。我将其设置为在警报之前更新HTML。

当我console.log时，它显示该数组已填充所有正确的字母，并且应该在检查获胜条件之前显示。

这是一件小事，但我花了很多时间不知道。通过阅读问题，似乎它可能与浏览器如何加载JS有关。任何帮助，将不胜感激。

这里是项目的链接：Project hosted on Github IO

//Global Variables===========================================================
// Used to check if the letters were already used
let lettersAlpha;
let songArr = ["caliente", "imposible", "bloqueo", "amanece", "desconocidos"];
let wins = 0;
let losses = 0;
let blanksAndSuccesses = [];
let userGuess;
let guessesLeft = 12;
let lettersUsed = [];
let randSong;

//Reset========================================================================
const reset = () => {
  lettersAlpha = ['a', 'b', 'c',
    'd', 'e', 'f',
    'g', 'h', 'i',
    'j', 'k', 'l',
    'm', 'n', 'o',
    'p', 'q', 'r',
    's', 't', 'u',
    'v', 'w', 'x',
    'y', 'z'
  ];

  //Erase word from last game
  blanksAndSuccesses.splice(0);
  //Clear the letters used last game
  lettersUsed.splice(0);
  //Get random song
  randSong = songArr[Math.floor(Math.random() * songArr.length)];

  //Create underscores based on number of letters
  for (let i = 0; i < randSong.length; i++) {
    blanksAndSuccesses.push("_");
  }
  //Reset Game Area
  $("#wordToGuess").html(blanksAndSuccesses.join(" "));
  //Reset Letters Guessed
  guessesLeft = 12;
  $("#numGuesses").html(`Guesses Left: ${guessesLeft}`);
  $("#lettersGuessed").html("Letters Guessed: ");
};

//Check guess right/wrong
let guessChecker = userGuess => {
  //True means letter is NOT used
  if (
    lettersAlpha.indexOf(userGuess) != -1 &&
    randSong.indexOf(userGuess) != -1
  ) {
    //Check against word
    for (let i = 0; i < randSong.length; i++) {
      if (userGuess === randSong[i]) {
        blanksAndSuccesses[i] = userGuess;
      }
    }
    //Remove the letter from the unused letters array
    lettersAlpha.splice(lettersAlpha.indexOf(userGuess), 1);
    //Update board
    $("#wordToGuess").html(blanksAndSuccesses.join(" ").toUpperCase());
    //Update guesses left (numGuesses)
    guessesLeft--;
    $("#numGuesses").html(`Guesses Left: ${guessesLeft}`);
    //Update letters guessed
    lettersUsed.push(userGuess);
    $("#lettersGuessed").html(
      "Letters Guessed: " + lettersUsed.join(",").toUpperCase()
    );
  } else if (
    lettersAlpha.indexOf(userGuess) != -1 &&
    randSong.indexOf(userGuess) == -1
  ) {
    //Remove from usable letters
    lettersAlpha.splice(lettersAlpha.indexOf(userGuess), 1);
    //Update numGuesses
    guessesLeft--;
    $("#numGuesses").html(`Guesses Left: ${guessesLeft}`);
    //Update letters guessed
    lettersUsed.push(userGuess);
    $("#lettersGuessed").html(
      "Letters Guessed: " + lettersUsed.join(",").toUpperCase()
    );
  }
};

//Check win condition
let winCondtion = function() {
  if (blanksAndSuccesses.join("") === randSong) {
    //Update wins
    wins++;
    $("#numWins").html(`Wins: ${wins}`);
    alert(`Congrats! You've won. The song was ${randSong.toUpperCase()}.`);
    reset();
  } else if (guessesLeft == 0) {
    //Update losses
    losses++;
    $("#numLosses").html(`Losses: ${losses}`);
    alert(`Sorry! You've lost. The song was ${randSong.toUpperCase()}.`);
    //Reset game board
    reset();
  }
};

//Keypress function/Play Game
$(document).keyup(e => {
  userGuess = e.key;
  guessChecker(userGuess);
  winCondtion();
});

reset();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id = "wordToGuess"></div>
<div id = "numGuesses"></div>
<div id = "lettersGuessed"></div>

Answer 1

问题在于alert调用之前DOM更改发生在下一个刻度。因此，如果将结果包装在setTimeout中，即使超时为0，它也可以正常工作。还有其他方法可以解决此问题，但这可能是最简单的。

        setTimeout(function() {
          alert(`Congrats! You've won. The song was ${randSong.toUpperCase()}.`);
          reset();
        }, 0);

这是一个有效的版本：

//Global Variables===========================================================
// Used to check if the letters were already used
let lettersAlpha;
let songArr = ["caliente", "imposible", "bloqueo", "amanece", "desconocidos"];
let wins = 0;
let losses = 0;
let blanksAndSuccesses = [];
let userGuess;
let guessesLeft = 12;
let lettersUsed = [];
let randSong;

//Reset========================================================================
const reset = () => {
  lettersAlpha = ['a', 'b', 'c',
    'd', 'e', 'f',
    'g', 'h', 'i',
    'j', 'k', 'l',
    'm', 'n', 'o',
    'p', 'q', 'r',
    's', 't', 'u',
    'v', 'w', 'x',
    'y', 'z'
  ];

  //Erase word from last game
  blanksAndSuccesses.splice(0);
  //Clear the letters used last game
  lettersUsed.splice(0);
  //Get random song
  randSong = songArr[Math.floor(Math.random() * songArr.length)];

  //Create underscores based on number of letters
  for (let i = 0; i < randSong.length; i++) {
    blanksAndSuccesses.push("_");
  }
  //Reset Game Area
  $("#wordToGuess").html(blanksAndSuccesses.join(" "));
  //Reset Letters Guessed
  guessesLeft = 12;
  $("#numGuesses").html(`Guesses Left: ${guessesLeft}`);
  $("#lettersGuessed").html("Letters Guessed: ");
};

//Check guess right/wrong
let guessChecker = userGuess => {
  //True means letter is NOT used
  if (
    lettersAlpha.indexOf(userGuess) != -1 &&
    randSong.indexOf(userGuess) != -1
  ) {
    //Check against word
    for (let i = 0; i < randSong.length; i++) {
      if (userGuess === randSong[i]) {
        blanksAndSuccesses[i] = userGuess;
      }
    }
    //Remove the letter from the unused letters array
    lettersAlpha.splice(lettersAlpha.indexOf(userGuess), 1);
    //Update board
    $("#wordToGuess").html(blanksAndSuccesses.join(" ").toUpperCase());
    //Update guesses left (numGuesses)
    guessesLeft--;
    $("#numGuesses").html(`Guesses Left: ${guessesLeft}`);
    //Update letters guessed
    lettersUsed.push(userGuess);
    $("#lettersGuessed").html(
      "Letters Guessed: " + lettersUsed.join(",").toUpperCase()
    );
  } else if (
    lettersAlpha.indexOf(userGuess) != -1 &&
    randSong.indexOf(userGuess) == -1
  ) {
    //Remove from usable letters
    lettersAlpha.splice(lettersAlpha.indexOf(userGuess), 1);
    //Update numGuesses
    guessesLeft--;
    $("#numGuesses").html(`Guesses Left: ${guessesLeft}`);
    //Update letters guessed
    lettersUsed.push(userGuess);
    $("#lettersGuessed").html(
      "Letters Guessed: " + lettersUsed.join(",").toUpperCase()
    );
  }
};

//Check win condition
let winCondtion = function() {
  if (blanksAndSuccesses.join("") === randSong) {
    //Update wins
    wins++;
    $("#numWins").html(`Wins: ${wins}`);
    setTimeout(function() {
      alert(`Congrats! You've won. The song was ${randSong.toUpperCase()}.`);
      reset();
    }, 0);
  } else if (guessesLeft == 0) {
    //Update losses
    losses++;
    $("#numLosses").html(`Losses: ${losses}`);
    alert(`Sorry! You've lost. The song was ${randSong.toUpperCase()}.`);
    //Reset game board
    reset();
  }
};

//Keypress function/Play Game
$(document).keyup(e => {
  userGuess = e.key;
  guessChecker(userGuess);
  winCondtion();
});

reset();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id = "wordToGuess"></div>
<div id = "numGuesses"></div>
<div id = "lettersGuessed"></div>