Question

最近几天我一直在努力，这似乎很简单，但是我无法使其正常工作。我试图每10秒显示一次关于兔子的事实。我已经编写了数组，循环和函数，但它仅显示数组中的最后一项。

var bunnyArr = ["Rabbits don't eat root vegetables, such as carrots", "baby rabbits are called kittens", "A group of rabbits are called a fluffel"];

function bunnyStat() {

    for (i = 0; i < bunnyArr.length; i++) {
        document.getElementById('listItem1').textContent = bunnyArr[i]
    }

}
setInterval(bunnyStat, 10000);

它也不会抛出任何错误，所以我很茫然。

Answer 1

您的函数一次遍历所有数组，这就是为什么您只看到最后一个数组的原因。

将计数器保留在函数之外，并在每次调用时将其递增：

var bunnyArr = ["Rabbits don't eat root vegetables, such as carrots", "baby rabbits are called kittens", "A group of rabbits are called a fluffel"];

var index = 0;
var total = bunnyArr.length;

function bunnyStat() {
    if (index == total) {
        index = 0;
    }
    document.getElementById('listItem1').textContent = bunnyArr[index++];
}

setInterval(bunnyStat, 10000);

<div id="listItem1"></div>

Answer 2

这是因为bunnyStat()很快地遍历了数组的所有三个元素，最后一个元素结束了。尝试这样的事情：

var lastBunnyStat = 0;
var bunnyArr = [
  "Rabbits don't eat root vegetables, such as carrots",
  "baby rabbits are called kittens",
  "A group of rabbits are called a fluffel"
];

function bunnyStat() {
  document.getElementById('listItem1').textContent = bunnyArr[lastBunnyStat++];
  if (lastBunnyStat >= bunnyArr.length) {
    lastBunnyStat = 0;
  }
}

setInterval(bunnyStat, 10000);

Answer 3

我确切地知道您的问题是什么，我的学生一直在做同样的事情。这是因为您错误地理解了计时器的概念：

每10000毫秒（= 10秒）将调用一次计时器。您必须让setInterval处理循环。在bunnyStat中，唯一要做的就是实现“循环内部”，这意味着您必须显示一个统计信息。

为了跟踪已显示的内容，您必须对函数外部的变量进行操作。例如，您可以从列表中删除该统计信息。

Answer 4

这是因为当您在每个间隔后调用该函数时，循环运行bunnyArr.length次并将文本设置为bunnyArr [i]，即，对于第一次迭代，它将值设置为“ Rabbits do n't eat”根蔬菜（例如胡萝卜）和下一个迭代，它将值设置为“小兔子被称为小猫”，最后在最后一个迭代中，将值设置为最后一个数组项。这就是为什么您只看到最后一项的原因。

var bunnyArr = ["Rabbits don't eat root vegetables, such as carrots", "baby rabbits are called kittens", "A group of rabbits are called a fluffel"];

var index = 0;

function bunnyStat() {
    document.getElementById('listItem1').textContent = bunnyArr[index];
    if(index<bunnyArr.length-1){
      index++;
    }else{
      index=0;
    }  
}
setInterval(bunnyStat, 10000);

Answer 5

其他人给出了正确的答案。作为奖励，我将数组随机化，而不是按相同的顺序循环。

  var lastBunnyStat = 0;
  var bunnyArr = [
    "Rabbits don't eat root vegetables, such as carrots",
    "Baby rabbits are called kittens",
    "A group of rabbits are called a fluffel",
    "Rabbits can turn their ears 180 degrees",
    "Their ears can pinpoint the exact location of a sound",
    "Rabbits don’t make good pals."
  ];
  bunnyArr.sort(function() {
        return 0.5 - Math.random();
  });
  // console.log(bunnyArr);

  function bunnyStat() {

    document.getElementById('listItem1').textContent = bunnyArr[lastBunnyStat++];
    if (lastBunnyStat >= bunnyArr.length) {
      lastBunnyStat = 0;
      bunnyArr.sort(function() {
          return 0.5 - Math.random();
      });
      // console.log('endofloop');console.log(bunnyArr);
    }
  }

  setInterval(bunnyStat, 1200);//change to 10000

Answer 6

一种解决此问题的“复杂”方法是使用ES6生成器。这些生成器基本上使您可以将函数“拆分”为多个部分。

在调用普通函数时，该函数运行完成，然后再给您控制权，在原始情况下，这仅表明最后一个副作用是可见的。

生成器函数是不同的，调用它们时，不会执行用户提供的代码，并且会返回“控件”对象。您收到的控制对象具有不同的方法，但在我们的示例中，我们仅对next方法感兴趣。

执行next方法后，生成器的代码将被执行，直到执行yield关键字，这将保存执行状态，然后再次暂停函数的执行，准备就绪调用next时进行下一次迭代。

尽管生成器在解决此问题方面可能非常强大（其他答案更简单），但它们的优点是代码易于阅读，因为您不再需要在函数外部声明变量，而且通常会更频繁读代码而不是写代码。

var bunnyArr = ["Rabbits don't eat root vegetables, such as carrots", "baby rabbits are called kittens", "A group of rabbits are called a fluffel"];

function* bunnyStat() {
    while(true) {
        for (let i = 0; i < bunnyArr.length; i++) {
            document.getElementById('listItem1').textContent = bunnyArr[i];
            yield;
        }
    }
}
const generator = bunnyStat();
generator.next();
setInterval(() => generator.next(), 10000);

<div id="listItem1"></div>

我在使用setInterval时遇到问题

6 个答案: