Question

我正在学习Javascript，并且正在做一个小练习，尝试在5次尝试中猜测一个随机数。

我定义了一个小的HTML文件，其中在<body>标签的末尾加载了Javascript文件。

//datos del programa
var numCorrect = parseInt(Math.random() * 100); //valor generado aleatoriamente
console.log(numCorrect);
var numAdivinado;
var guesses = [];
var limit = 5;

//mostrando caja de texto al usuario
while ( limit > 0) {
   limit--;
   numAdivinado = parseInt(window.prompt("Ingrese un número"));

   if (valArray(numAdivinado) == true) {
       limit++;
   }

   document.write("Los numeros hasta ahora ingresados son: " + guesses.toString() + "\n");

   if (numAdivinado == numCorrect) {
       document.write("El numero ingresado coincide con el aleatorio");
       break;
   } else {
       window.alert("Error! - Le quedan " + limit + " intentos");
   }

   if(limit == 0) {
       document.write("Perdio! - El número correcto era: " + numCorrect);
   }

}

//función que valida el array
function valArray(numb) {
   if (guesses.length > 0) {
       for(var i = 0; i<guesses.length; i++) {
           if(numb == guesses[i]) {
               window.alert("El numero ya fue elegido, debe usar otro - no perdera una portunidad");
               return true;
           }
       }
       guesses[guesses.length] = numb;
       return false;
   } else {
       guesses[0] = numb;
       return false;
   }
}

<!DOCTYPE HTML>

<html lang="es">
   <head>
       <meta charset="utf-8">
       <title>Guessing Game</title>
   </head>
   <body>
       <h1>Guessing Game</h1>

       <script src="game.js"></script>
   </body>
</html>

当我第一次加载页面时，会渲染H1标签，然后会出现一个要求输入数字的弹出窗口，从而开始执行该应用程序。在应用程序执行结束并显示结果后，我使用 F5 或 CTRL + F5 键重新加载页面并再次运行该应用程序，但我不明白为什么在显示弹出窗口之前不能再次渲染H1标签。只需直接弹出该弹出窗口，并在进行所有尝试之后，将渲染所有内容，包括H1标签。

到目前为止，我已经读到，当我在正文的末尾添加<script>标签时，我至少应该允许<H1>标签以标题和然后执行所有JS逻辑。

您能告诉我为什么这种情况没有发生吗？或在此示例中HTML呈现的实际工作方式。

Answer 1

它不会被渲染，因为您处于while循环中，如果您定义一个函数并最后用setTimeout(functionName,1)调用它，则不会为渲染留下时间，它将在每次调用之间留出1毫秒的时间，其中渲染可能发生的示例：

         limit =5;
         function parseNumber(currentLimit);
           numAdivinado = parseInt(window.prompt("Ingrese un número"));

           if (valArray(numAdivinado) == true) {
               limit++;
           }

           document.write("Los numeros hasta ahora ingresados son: " + guesses.toString() + "\n");

           if (numAdivinado == numCorrect) {
               document.write("El numero ingresado coincide con el aleatorio");
               break;
           } else {
               window.alert("Error! - Le quedan " + limit + " intentos");
           }

           if(limit == 0) {
               document.write("Perdio! - El número correcto era: " + numCorrect);
           }
           if(currentLimit<limit ){
               //functino to call , timeout, ...parameters
               setTimeout(parseNumber,1,currentLimit-1)
           }
        }
        parseNumber(0);

Answer 2

您可以将javascript包装为：

document.addEventListener("DOMContentLoaded", function() {
   // your page initialization code here
   // the DOM will be available here
});

这将确保在脚本执行之前已加载DOM。

此外，您不应使用@Alex Kudryashev提到的document.write。您应该使用document.createElement和appendChild来使用文档片段：

let paragraph = document.createElement('p');
paragraph.innerText = "whatever I need to load or say";

// you can use the body, a div, or whatever element you want to append to
myElement.appendChild(paragraph);

jsPerf CoderWall Article

为什么在执行Javascript文件之前未呈现H1标签？

2 个答案: