我正在尝试让我的最终警报消息“Congratulations...”和 HTML 背景颜色同时发生变化。颜色变化发生在之后 我单击已显示的警报消息的“确定”按钮。我哪里错了？
不可否认，有一个类似的问题，虽然我没有从建议的解决方案中得到任何指示。
let myColors = ["red", "purple", "blue",
"orange", "violet", "green",
"amber", "olive", "navy",
"maroon", "lime", "yellow", "chartreuse",
"crimson", "wheat", "deeppink",
"gold", "beige", "turquoise"
];
let yourColor = (prompt("I am thinking of one of these colors:\n\n" + (myColors.sort()).join(", ") + "\n\nWhat color am I thinking of?")).toLowerCase();
function yourGuessedColor() {
while (myColors.indexOf(yourColor) <= -1) {
alert("Sorry, I don't recognize your color.\n\nPlease try again.");
yourColor = (prompt("I am thinking of one of these colors:\n\n" + (myColors.sort()).join(", ") + "\n\nWhat color am I thinking of?")).toLowerCase();
}
return yourColor;
}
let guessedColor = yourGuessedColor();
let guesses = 1;
function colorGame() {
let myFavColor = myColors[Math.floor(Math.random() * myColors.length)];
while (guessedColor != myFavColor) {
if (guessedColor > myFavColor) {
alert("Sorry, your guess is not correct!\n\nHint: your color is alphabetically higher than mine.\n\nPlease try again.");
guessedColor = (prompt("I am thinking of one of these colors:\n\n" + (myColors.sort()).join(", ") + "\n\nWhat color am I thinking of?")).toLowerCase();
} else {
alert("Sorry, your guess is not correct!\n\nHint: your color is alphabetically lower than mine.\n\nPlease try again.");
guessedColor = (prompt("I am thinking of one of these colors:\n\n" + (myColors.sort()).join(", ") + "\n\nWhat color am I thinking of?")).toLowerCase();
}
guesses++;
document.body.style.backgroundColor = myFavColor;
}
return alert("Congratulations! You have guessed the color!\n\nIt took you " + guesses + " guesses to finish the game.\n\nYou can see the color in the background.");
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Color Guessing Game</title>
</head>
<body onload="colorGame()">
<script type="text/javascript">
</script>
</body>
</html>最佳答案
这里实际上发生了两件事。如评论中所述，Javascript 是单线程的，在执行下一条指令之前，会有一个警告框等待您点击。在您的情况下，一种可能性是在显示警告框之前简单地更改颜色:
//CHANGE THE COLOR BEFORE ALERTING
document.body.style.backgroundColor = guessedColor;
return alert("Congratulations! You have guessed the color!\n\nIt took you " + guesses + " guesses to finish the game.\n\nYou can see the color in the background.");
但是这里还有其他事情发生。看起来即使您首先触发更改背景颜色的命令，警告框也会在指令(更改颜色)完成之前被触发。警告框会停止浏览器中的线程，并且还必须包含颜色更改指令。我不确定这是否是错误。而且我只在 Chrome 中尝试过，所以我不确定其他浏览器。
解决此问题的一种方法是将警告框置于延迟计时器上，如下所示:
document.body.style.backgroundColor = guessedColor;
var alertMsg = "Congratulations! You have guessed the color!\n\nIt took you " + guesses + " guesses to finish the game.\n\nYou can see the color in the background.";
setTimeout(function(){alert(alertMsg)},100);
这是一个工作示例:https://jsfiddle.net/Lzcht5dz/1/
关于javascript - 为什么我的警告消息和背景颜色变化不同时执行？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41962628/