为什么我的警报消息和背景颜色更改不能同时执行? [英] Why don't my alert message and background color change execute simultaneously?
问题描述
我正在尝试同时获得最终的警报消息恭喜..."和HTML背景颜色更改同时发生.在 之后发生颜色变化.单击已显示的Alert消息的"Ok"按钮.我要去哪里错了?
I'm trying to get both my final Alert message "Congratulations..." and the HTML background color change to happen simultaneously. The color change happens after I click on the 'Ok' button of the already displayed Alert message. Where am I going wrong?
诚然，尽管我没有从建议的解决方案中获得任何指导，但仍有一个类似的问题.
Admittedly, there is a similar question, though I didn't get any pointers from the suggested solutions.
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是单线程的，并且在执行下一条指令之前，警告框会等待您单击.在您的情况下，一种可能性是在显示警报框之前简单地更改颜色:
There are actually two things going on here. As noted in the comments, Javascript is single-threaded and an alert box waits for your click before executing the next instruction. In your case, one possibility would be to simply change the color before showing the alert box:
//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中尝试过，所以我不确定其他浏览器.
But there is also something else going on here. It looks like even if you fire off the command to change the background color first, the alert box gets fired off before the instruction (to change the color) finishes. An alert box stops the thread in the browser, and that must include the color change instruction as well. I'm not sure if this is a bug or not. And I've only tried it in Chrome, so I'm not sure about other browsers.
解决此问题的一种方法是将警报框放在延迟的计时器上，如下所示:
One way you can get around this is to put your alert box on a delayed timer, like this:
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/
这篇关于为什么我的警报消息和背景颜色更改不能同时执行?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
