HTML 页面看起来像在 javascript 运行后加载。为什么 h1 的初始 HTML 具有颜色=橙色的样式，但在加载期间从未在页面上观察到？

Question

我希望下面的代码加载一个显示“橙色”的页面，并在 5 秒后将其更新为“蓝色”，但不幸的是页面仅加载“蓝色”。 如果我取消注释警报，它会首先显示“橙色”。 为什么会这样？

 wait(5000); console.log("Exercise 001"); const updatedH1 = document.querySelectorAll('h1'); updatedH1.forEach(itemx => { itemx.style.color = 'blue'; itemx.innerText = 'Blue Color'; }); function wait(ms) { let start = new Date().getTime(); let end = start; while (end < start + ms) { end = new Date().getTime(); } }

 .err { padding: 10px; color: crimson; border: 1px dotted crimson; }

 <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styles.css"> </head> <body> <h1 id="page-title" style="color: orange;">Orange Color</h1> <,-- <script> alert('Hello; world'). </script> --> <script src="roza.js"></script> </body> </html>

Answer 1

您不需要在这里自定义等待 function。 对于这种情况，有一个名为setTimeout的内置方法，它是 web 浏览器 API 设置一个计时器并在计时器耗尽后在其中执行一个 function。

所以你的最终代码应该是这样的：

 setTimeout(function() { console.log("Exercise 001"); const updatedH1 = document.querySelectorAll('h1'); updatedH1.forEach(itemx => { itemx.style.color = 'blue'; itemx.innerText = 'Blue Color'; }); }, 5000)

 .err { padding: 10px; color: crimson; border: 1px dotted crimson; }

 <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styles.css"> </head> <body> <h1 id="page-title" style="color: orange;">Orange Color</h1> <,-- <script> alert('Hello; world'). </script> --> <script src="roza.js"></script> </body> </html>

注意：您可以在此处阅读有关setTimeout的更多信息。

Answer 2

我真的建议在您创建的 while 循环上使用 setTimeout。

 window.setTimeout(() => { const updatedH1 = document.querySelectorAll("h1"); updatedH1.forEach(itemx => { itemx.style.color = "blue"; itemx.innerText = "Blue Color"; }); console.log("Exercise 001"); }, 3000);

 <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="src/styles.css" /> </head> <body> <h1 id="page-title" style="color: orange;">Orange Color</h1> <,-- <script> alert('Hello; world'). </script> --> <script src="roza.js"></script> </body> </html>

HTML 页面看起来像在 javascript 运行后加载。为什么 h1 的初始 HTML 具有颜色=橙色的样式，但在加载期间从未在页面上观察到？

问题描述

2 个解决方案

解决方案1
2 已采纳 2020-05-11 04:22:51

解决方案2
0 2020-05-11 04:26:42

HTML 页面看起来像在 javascript 运行后加载。 为什么 h1 的初始 HTML 具有颜色=橙色的样式，但在加载期间从未在页面上观察到？

问题描述

2 个解决方案

解决方案1 2 已采纳 2020-05-11 04:22:51

解决方案2 0 2020-05-11 04:26:42

HTML 页面看起来像在 javascript 运行后加载。为什么 h1 的初始 HTML 具有颜色=橙色的样式，但在加载期间从未在页面上观察到？

解决方案1
2 已采纳 2020-05-11 04:22:51

解决方案2
0 2020-05-11 04:26:42