javascript - JS运行后图片加载到DOM中

Question

我遇到了真正奇怪的问题。我有一个简单的猜谜游戏，会问四个问题。它接受带有警报的用户输入，无论用户猜测正确还是错误，都会打印到 DOM，然后显示图像(绿色复选框或红色 x)，然后转到下一个问题。 等等，等等。

问题: 游戏运行，将消息打印到 DOM，但直到整个游戏结束才显示图像。

奇怪的是，chrome 控制台清楚地显示 img 元素的“src”属性正在被正确修改(并且文件树已正确排列以访问图像)。 相反，会出现一个空白框。当然，直到游戏结束。

我的 HTML 的示例:

<p id="question1" class="rightAnswer" class="wrongAnswer"></p>
<img id="img1" src="" width="100">

JS 函数(IIFE)。每个问题都有一个函数，它们看起来都与这个相同:

var question1 = (function() {
  var userAnswer1 = prompt(arrayQuestions[0]);
  if((userAnswer1.toUpperCase() === "BOSTON") || (userAnswer1.toUpperCase() === "BOS")) {
    // inserts correct or incorrect message after user guesses
    document.getElementById('question1').innerHTML= arrayAnswerCorrect[0];
    // changes color of that message
    document.getElementById('question1').style.color = "green";
    // inserts image via 'src' attribute
    document.getElementById('img1').src = "images/correct.png";

    scoreIt++;
  } else {
    document.getElementById('question1').innerHTML = arrayAnswerIncorrect[0];
    document.getElementById('question1').style.color = "red";
    document.getElementById('img1').src = "images/incorrect.png";
  };
}());

提前谢谢您。这真是难倒我了。

Answer 1

问题和 DOM 更新位于单个代码块中，该代码块开始、一次提出一个问题，最后在最后一个问题后完成执行。

但是 javascript 线程会一直运行到完成:一旦启动，就不会中断它们，直到代码返回。提示只会阻塞 javascript 线程，直到用户输入信息。尽管浏览器在执行线程期间接受对 DOM 的修改，并且可能会在 DOM 元素属性中反射(reflect)对 DOM 的更改，但它们通常会推迟重新渲染页面，直到脚本完成。

您需要重新考虑如何按顺序提出问题，但在开始下一个问题之前运行每个问题的代码直至完成。两种可能性是显而易见的:1) “下一个问题”按钮，2) 考虑使用 setTimeout 调用来调用下一个问题代码。祝你好运;-)