javascript - 无法更改innerHTML 属性

Question

我试图用一些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>

Answer 1

您的 while 循环使 JavaScript 保持忙碌，因此 DOM 没有机会更新。您对 innerHTML 所做的任何更改仅在 JavaScript 停止执行代码时才可见。所以只要你循环，这种情况就不会发生。请注意，这样的“繁忙循环”也会阻止用户交互:当该循环继续时，无法处理网页上的点击或按键操作。

而是使用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 .