Javascript首先执行，然后正文中的文本稍后加载答案

【问题标题】：Javascript executes first then text in body loads laterJavascript首先执行，然后正文中的文本稍后加载
【发布时间】：2018-01-08 23:44:07
【问题描述】：

为什么在我的浏览器中，当我第一次运行我的 java 脚本文件时，它会加载正文中的文本，但是当我在 stackoverflow javascript sn-p 工具中运行它时，它运行良好。

var name= prompt("enter your name");
var age= prompt("enter your age");
var pet_name= prompt("enter your fav pets name");

alert("hi "+name+" your age is "+age+"and you love"+pet_name);
console.log("hi "+name+" your age is "+age+"and you love"+pet_name);

<!DOCTYPE html>
<html>
<head>
	<title>testing javascript</title>
</head>
<body>

<h4>Testing of my first java script</h4>

<script type="text/javascript" src="test_1.js"></script>

</body>
</html>

【问题讨论】：

<h4> 元素在document 中呈现在<script> 元素之前
它不适用于 Stack Overflow...
JSFiddle 显示问题：jsfiddle.net/fzf1q5tt
你试过了吗defer:w3schools.com/tags/tryit.asp?filename=tryhtml_script_defer
用过defer还是同样的问题

标签： javascript html

【解决方案1】：

我认为这是因为 alert、confirm 和 prompt 都是“阻塞”函数，并且在渲染发生的同时被调用，尝试将代码放入 setTimeout 或准备好文档：

document.addEventListener("DOMContentLoaded", function(event) { 
  // your code
});

或

var delayedScript = function() {
  // your code
}

setTimeout(delayedScript, 500);

https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt#Notes

对话框是模态窗口；它们阻止用户访问程序界面的其余部分，直到对话框关闭

【讨论】：

第一个代码不起作用，但在手动将代码放入延迟脚本后它起作用了

【解决方案2】：

看起来你的代码执行得很好，所以我能想到的唯一结论是脚本标签没有正确实现。

验证它的名称确实是“test_1.js”，并且它与您的 html 所在的文件位于同一位置。

如果不是，您可以使用relative path。

其他几点：

javascript 类型是多余的，因为 Javascript 是 Web 的默认脚本语言。
年龄变量后和“爱”字符串后缺少空格。

我希望这会有所帮助:)

【讨论】：

它只适用于 sn-p 的第一次。这个答案在这一点上是不正确的
@SC87 更改了 js 文件名并再次尝试并尝试了您提到的所有空格，但仍然是同样的问题
@ChinmayaRanjanBiswal 到底是什么问题，你还需要更改 h4 标签吗？
@ChinmayaRanjanBiswal 我刚刚在实时环境中看到了您的代码，并意识到了问题所在。您可以尝试将其包装在自己的函数中，并使用 jQuery 使用文档就绪来调用它。 function myFunction() { var name= prompt("输入你的名字"); var age= prompt("请输入您的年龄"); var pet_name= prompt("请输入您最喜欢的宠物名称"); alert("hi "+name+" 你的年龄是 "+age+"并且你爱"+pet_name); console.log("hi "+name+" 你的年龄是 "+age+"并且你爱"+pet_name); }; $(document).ready(function() { myFunction(); });

【解决方案3】：

行为是特定于浏览器的。特定的浏览器可能会等到页面输入流的末尾才呈现页面：也许位于文件末尾附近的定位元素可能仍需要在页面顶部呈现。

现在 javascript 中的弹出对话框，如 alert、confirm 和 prompt 对脚本具有同步阻止操作，可以暂停 HTML 解析，直到它们得到响应。因此，Chrome 等浏览器在页面输入完成之前不会呈现，在提示被回答或关闭之前不会显示脚本块上方的文本。

诸如 Firefox 等增量渲染页面的浏览器可能会从脚本块上方显示文本。

SO 中的代码 sn-p 工具的工作方式不同。它处理来自 HTML 框的内容，将其放入输出窗格，然后处理来自脚本面板的内容。所以 HTML 内容首先出现。

需要等待窗口“加载”或文档“DOMContentLoaded”事件的片段代码未正确测试使用 sn-p 工具。

在页面呈现后使用弹出对话框的一般解决方案是（如已建议的那样）推迟处理相关代码，直到在文档上触发“DOMContentLoaded”事件或在窗口上“加载”之后。

【讨论】：