一次向div中添加一个新字符，而不是与javascript一起添加

Question

几年后，我决定再次和Javascript一起玩。是否可以一次将一个"X"字符添加到一个div中？ DOM似乎显示的行为是等待并将它们成束添加。页面只是空白，然后“旋转”，然后是bam，所有内容立即显示。我正在拍摄的行为是让"X's"每次出现2秒的延迟。

<div id="here"></div>

<script>

function wait(ms) {
    var d = new Date();
    var d2 = null;

    do {
        d2 = new Date();
    }
    while (d2 - d < ms);
}

function runTest() {
    var cnt = 0;

    while (cnt < 50) {
        var x = document.getElementById("here");
        x.innerHTML += "X + ";
        wait(2000);
        cnt++;
    }
}

</script>

Answer 1

我认为您的URL函数并没有达到您的期望：它作为一个循环实施，在一定时间内会占用尽可能多的资源。您可以在下一个示例中进行检查，其中显示两个日志（一个在wait()之前，一个显示在wait()函数停止占用资源后）：

wait()

function wait(ms)
{
    var d = new Date();
    var d2 = null;

    do {
        d2 = new Date();
    }
    while (d2 - d < ms);
}

console.log("Before wait() is called");
wait(5000);
console.log("After wait() is done");

您想做的事情更适合setInterval()。

带有.as-console {background-color:black !important; color:lime;}的示例：

setInterval()

var cnt = 0;
var x = document.getElementById("here");
var ival = setInterval(addX, 2000);

function addX()
{
    if (++cnt > 10)
    {
        clearInterval(ival);
        console.log("Finished!");
        return;
    }

    x.innerHTML += "X + ";
}

.as-console {background-color:black !important; color:lime;}

clearInterval()用于取消配置的重复操作。

获得所需信息的另一种方法是与Promise()结合使用setTimeout()来实现<div id="here"></div>方法，如下所示：

带有wait()的示例：

Promise

function wait(ms)
{
    return new Promise(resolve => setTimeout(resolve, ms));
}

async function runTest()
{
    var cnt = 0;

    while (cnt < 10)
    {
       var x = document.getElementById("here");
       x.innerHTML += "X + ";
       await wait(2000);
       cnt++;
    }
}

runTest();

Answer 2

使用setInterval（）会更好。 Javascript没有线程化，等待将导致每次单击它都会停止整个执行。在极少数情况下，您将使用wait（）。相反，您希望设置一个间隔，使其每X秒运行一次。

因此，以下代码将一个函数设置为每2秒运行一次，每当计数增加到50时，它就会向dom发送一条消息，告知其不再运行该函数。

function divBunches() {
  var elem = document.getElementById("here"); 
  var id = setInterval(addDiv, 2000);
  var count = 0;
  function addDiv() {
    if (count == 50) {
      clearInterval(id);
    } else {
      elem.innerHTML += "X + ";
    }
    count++;
  }
}