I have one of these “I can make the problem go away, but I want to know how I would have fixed it” questions. The question is, basically, what’s the simplest and most straightforward way to make a line of JS wait until updates to the HTML, set in motion by a preceding line, have rendered?
I’m making a simple hangman game (here’s the whole repo, if you’re curious). Right now when the user wins or loses a game, an alert is triggered to inform them of the fact. But the command to either display their final, winning letter, or to draw the last leg of the hangman, hasn’t taken effect on the screen before flow is blocked by the alert. Here are the winning or losing functions:
const wrongGuess = letter => {
totalWrong++;
document.getElementById("wrongGuesses").innerHTML += " " + letter; //bootcamp assigment; we're not supposed to have learned jQuery yet
document.getElementById("svg").innerHTML += svgElements[totalWrong - 1];
alreadyGuessed.push(letter);
if (totalWrong === 6) {
alert("You lose. The word was: " + mysteryWord);
reset();
}
}
const rightGuess = letter => {
for (var i = 0; i < mysteryWord.length; i++) {
if (mysteryWord[i] === letter) {
document.getElementById("blank" + i).innerHTML = " " + letter;
totalRight++; //iterate here to account for multiple ocurrences of the same letter
}
}
alreadyGuessed.push(letter);
if (totalRight === mysteryWord.length) {
alert("Yay!! You win!");
reset();
}
}
Now, I could certainly fix the issue by not using an alert at all, because they’re annoying and stupid and flow-blocking; I could display the message directly on the page. But I want to know, for the future, what is the best method of making one block of code wait while an earlier block updates HTML? I could imagine:
- a plain old callback (does this require the “success” handler?)
- promises and “then” (but clearly I don’t understand them yet. What returns what now?)
- what about this suggestion of
requestAnimationFrame
? - attach a jQuery event handler to the element in question–
$.ready
? or some such? Is there a non-jQuery way to simply say “listen for when this ID is updated”–not “loaded (for the first time)” but updated?