Добавляйте нового персонажа в div по одному, а не в связках с javascript

Question

Я решил поиграть с Javascript снова через несколько лет. Можно ли добавить символ, скажем "X", к div по одному? Поведение, которое DOM отображает, заключается в том, чтобы ждать и добавлять их в группы. Страница просто пустая и «раскручивается», а потом бац, все сразу появляется. Поведение, для которого я снимаю, - "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

Я не думаю, что ваша функция 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");

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

То, что вы хотите сделать, лучше подходит для setInterval () .

Пример с 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;}

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

clearInterval () используется для отмены настроенного повторного действия.

Еще один способ получить то, что вам нужно, это использовать Promise () в сочетании с setTimeout () для реализации вашего 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();

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

Answer 2

Вам лучше использовать setInterval ().Javascript не является многопоточным, и ожидание будет приводить к остановке всего выполнения при каждом нажатии.Есть очень мало случаев, когда вы когда-либо будете использовать wait ().Вместо этого вы хотите установить интервал для запуска каждые X секунд.

Таким образом, следующий код установит функцию для запуска каждые 2 с, и всякий раз, когда счетчик достигает 50, он затем отправляет сообщениеДом сказал, чтобы больше не запускать эту функцию.

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++;
  }
}