Question

嘿伙计我和javascript一起玩and并且我一直在搞乱它，我想知道是否有机会控制事件导致输出，例如＆＃34; for loop＆＃34;，这就是我所得到的：

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＆＃39;结果＆＃39;：

cat
dog
parrot
wolf

我一直试图做的是在每个输出之间设置1秒的间隔...所以猫首先出现，然后是狗后面的第二个等等......这可能吗？提前谢谢

Answer 1

是。它可能......

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

＆＃13;

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);

＆＃13;

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

＆＃13;

或

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

是的，你可以使用setTimeout（function_to_call，1000）;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 3

使用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 4

绝对不同，根据您的需要，有几种选择：

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

＆＃13;

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

＆＃13;

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

＆＃13;

如果您需要粒度控制，

window.setTimeout将允许您控制每个间隔。例如，如果您需要暂停，可以使用window.clearTimeout向您发送window.setTimeout来电的结果。这也可以让您一次性运行2次超时。

＆＃13;

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();

＆＃13;

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

＆＃13;

Answer 5

虽然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>

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

5 个答案: