无法更改innerHTML属性
无法更改innerHTML属性
提问于 2020-01-30 03:11:35
我试图用一些js做一些非常简单的事情，并且我试图通过在输出元素中显示一个省略号，然后再显示答案，来做一个有点加载的东西。对innerHTML的第二个更改正在工作，程序处于休眠状态，但最初不会更改。帮助?
function getRandom() {
function sleep(milliseconds) {
console.log("go");
const date = Date.now();
let currentDate = null;
do {
currentDate = Date.now();
} while (currentDate - date < milliseconds);
}
document.getElementById("output").innerHTML = "...";
sleep(1000);
let inputRaw = document.getElementById("typeField").value;
let inputLines = inputRaw.split('\n');
var randomInputLine = inputLines[Math.floor(Math.random() * inputLines.length)]
document.getElementById("output").innerHTML = randomInputLine;
console.log("click");
}#row1 {
text-align: center;
}
#row2 {
text-align: center;
}
#typeField {
border: 5px solid gray;
border-radius: 2.5px;
}
#output {}
#getRandomButton {
border: 2px solid gray;
border-radius: 1px;
font-size: 20px;
}<div id="row1">
<textarea rows="20" cols="60" id="typeField">
Enter list of words to randomly choose from, each on its own line
</textarea>
<br>
<h1 id="output"></h1>
</div>
<div id="row2">
<button onclick="getRandom()" id="getRandomButton">Get Random</button>
</div>
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-01-30 03:16:13
您的while循环使JavaScript处于繁忙状态，因此没有机会更新DOM。只有当JavaScript停止执行您的代码时，您对innerHTML所做的任何更改才可见。所以只要你循环，这种情况就不会发生。请注意，这样的“忙碌循环”也会阻塞用户交互:当该循环继续时，网页上的任何点击或按键都无法处理。
请改用setTimeout。
function getRandom() {
document.getElementById("output").innerHTML = "...";
console.log("click");
setTimeout(function () {
let inputRaw = document.getElementById("typeField").value;
let inputLines = inputRaw.split('\n');
var randomInputLine = inputLines[Math.floor(Math.random() * inputLines.length)]
document.getElementById("output").innerHTML = randomInputLine;
}, 1000);
}setTimeout将安排一些JavaScript在稍后执行。但是在超时到期之前，不再执行JavaScript，因此页面可以根据您对innerHTML所做的任何更改(以及可能对DOM所做的其他更改)进行更新。
有关JavaScript的这一方面的更多信息：Concurrency model and the event loop。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59974014
复制相关文章
相似问题
腾讯云开发者
