Question

我试图在将一些p标签添加到dom之间的间隔2秒。这就是到目前为止。

var inputs = ['blah','blah blah', 'blah blah blah'];

function insertInput(input){
  inputs.forEach(function(input){
    var commandP = document.createElement('p'),
    textNode = document.createTextNode(input),
    newInput = document.getElementById('first_input');
    commandP.appendChild(textNode);
    commandP.className = 'inputs';

    delayInsert(newInput, commandP);
  })
}

function delayInsert(input, command){
    setTimeout(function(){
      input.appendChild(command);
    }, 2000)
}

insertInput(inputs);

通常不经常使用setTimeout，所以答案对我来说并不容易理解，但是所有dom节点都在同一时间添加。如果有人对如何将节点的插入分隔开来有一个解决方案，并且因为我现在很好奇而要解释为什么这种行为首先发生，我将不胜感激。

Answer 1

您的forEach调用在同一时间（给定或执行）执行，因此您以相同的延迟在同一时间获得对setTimeout的多次调用，因此所有功能都同时执行。

要对此进行调整，您只需修改赋予setTimeout的延迟时间

function insertInput(input) {
    inputs.forEach(function (input, i) {
        // ...
        delayInsert(newInput, commandP, (i + 1) * 2000);
    })
}

function delayInsert(input, command, delay) {
    setTimeout(function () {
        input.appendChild(command);
    }, delay);
}

Javascript setTimeout调用以添加Dom节点，同时添加所有

1 个答案: