Question

我正在尝试同时获取我的最终警报消息“祝贺...”并且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>

Answer 1

这里实际上有两件事。如评论中所述，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.");

但这里还有其他事情发生。看起来即使您先关闭命令来更改背景颜色，警告框也会在之前触发指令（更改颜色）结束。警报框会停止浏览器中的线程，并且还必须包含颜色更改指令。我不确定这是不是一个bug。我只在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/

Answer 2

在警报框被解除之后，您的javascript的下一行才会运行。您可以使用不会暂停执行的console.log（），而不是使用alert（）。

编辑：我的不好，你希望用户看到它。作为下面建议的评论者，只需在显示警报（）之前更改背景颜色。

Answer 3

alert()停止脚本直到被解雇。尝试将alert()替换为display()，并将display()定义为：

function display(a){
    document.getElementById("display").innerHTML = a;
}

确保HTML中包含ID为display的元素。

为什么我的警报信息和背景颜色不会同时执行？

3 个答案: