在 for 循环中设置一个间隔以显示结果

Question

嘿，伙计们，我是 javascript 的菜鸟，我一直在搞乱它，我想知道是否有机会控制导致输出的事件，例如“for循环”，这里是我有什么：

var stuff= ["cat","dog","parrot","wolf"];
var output = "";
for(var i = 0; i < stuff.length; i++){
    output += stuff[i] + "</br>"; 
}

document.getElementById("result").innerHTML = output;

它将在我的 div 'result' 中输出：

cat
dog
parrot
wolf

我一直在尝试做的是在每个输出之间设置 1 秒的间隔...所以 cat 先出现，然后在 dog 之后出现，依此类推...这可能吗？提前致谢

Answer 1

是的，这是可能的，你使用 setTimeout(function_to_call, 1000);

在您的 for 循环中，您可以在每次迭代时使用 setTimeout，但时间会随着 i 的增加而增加，以便每秒将内容附加到 #result：

 var stuff= ["cat","dog","parrot","wolf"];
    
    for(var i = 0; i < stuff.length; i++)
    {
        var func = function(index)
        {
        setTimeout(function()
        {
            document.getElementById("result").innerHTML += stuff[index] + "<br/>";
        }, 1000*index);
        }
        func(i);
    }

<p id="result"></p>

    var func = function(index)
    {
    setTimeout(function()
    {
        document.getElementById("result").innerHTML = document.getElementById("result").innerHTML + stuff[index] + "<br/>";
    }, 1000*index);
    }
    func(i);
}

Answer 2

使用setInverval()。

var stuff = ["cat", "dog", "parrot", "wolf"],
  i = 0;

var timer = setInterval(function() {
  if (i < stuff.length) {
    document.getElementById("result").appendChild(document.createTextNode(stuff[i]));
    document.getElementById("result").appendChild(document.createElement('br'));
    i++;
  } else {
    clearTimeout(timer);
  }
}, 1000);

<div id="result"></div>

Answer 3

当然，根据您的需要，有几个选项：

对于您的示例，最简单的方法是使用window.setInterval：

var stuff= ["cat","dog","parrot","wolf"];
var interval=window.setInterval(reportContent,1000);

function reportContent(){
  output=stuff.shift();
  document.getElementById("result").innerHTML += output+'<br/>';
  if(stuff.length<1) window.clearInterval(interval);
}

<div id="result"></div>

window.setTimeout 将允许您控制每个间隔，如果您需要精细控制，这很好。例如，如果您需要暂停，您可以使用window.clearTimeout，将您的window.setTimeout 调用结果发送给它。这也可以让您启用您永远不会同时运行 2 个超时。

var stuff= ["cat","dog","parrot","wolf"];
var timeout=0;

function reportContent(){
  if(timeout>0) window.clearTimeout(timeout);
  output=stuff.shift();
  document.getElementById("result").innerHTML += output+'<br/>';
  if(stuff.length>0) timeout=window.setTimeout(reportContent,1000);
}
reportContent();

<div id="result"></div>

Answer 4

虽然 javascript 本身没有暂停函数，但您可以在给定时间后调用函数。这是集合setTimeout 函数。你可以这样做：

function printItemsToDiv(stuff, index)
{
  var output = "";

  for(var i = 0; i < stuff.length && i < index; i++){
    output += stuff[i] + "</br>"; 
  }

  document.getElementById("result").innerHTML = output;

  if(index < stuff.length) {
    setTimeout(function() { printItemsToDiv(stuff, index + 1); }, 1000);
  }
}

var stuff = ["cat","dog","parrot","wolf"];
printItemsToDiv(stuff, 1);

<div id="result"></div>

Answer 5

是的。有可能。。

使用setInterval（开始时有 1 秒的延迟，如果需要可以修复）

var stuff= ["cat","dog","parrot","wolf"];
var output = "";
var i = 0;
var interval = setInterval(function(){
     output += stuff[i] + "</br>";
    document.getElementById("result").innerHTML = output;
    i++;
    if (i==stuff.length){
       clearInterval(interval);
    }
},1000);

<div id="result"></div>

---

或

您可以将循环与setTimeout 函数一起使用。

var stuff= ["cat","dog","parrot","wolf"];
var output = "";
for(var i = 0; i < stuff.length; i++){
    (function(i){
        setTimeout(function(){
            output += stuff[i] + "</br>"; 
            document.getElementById("result").innerHTML = output;
        },1000*i);
    })(i);
}

<div id="result"></div>