Question

我想打印一个包含术语的段落，该术语每秒使用JavaScript setInterval方法动态更改。

更改的术语位于我想要迭代的数组中。问题是，不是迭代数组中的每个术语并显示它，而是只显示数组中的最后一个术语。

以下是代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            #changingText{
                color: blue;
                font-size: 2.8em;
            }
        </style>
    </head>
    <body>
        <p>Hello! I am a <span id="changingText">person</span></p>

        <script>
            var changingText = document.getElementById('changingText');

            var things = ['Rap fan', 'runner', 'male', 'basketball player', 'mammal'];

            setInterval(changeText, 1000);

            function changeText() {
                for(var i = 0; i < things.length; i++) {
                    changingText.innerHTML = things[i];
                }

            }


        </script>
    </body>
</html>

我做错了什么？

Answer 1

问题是你的for循环遍历数组的每个成员每次调用你的间隔。我们想要的只是增加i，显示结果，然后退出功能，直到再次调用间隔。

这是一个有效的现场演示：

var changingText = document.getElementById('changingText');

var things = ['Rap fan', 'runner', 'male', 'basketball player', 'mammal'];

setInterval(changeText, 1000);

var i = 0;

function changeText() {
  changingText.innerHTML = things[i];
  i++;
  if (i >= things.length) i = 0;
}

#changingText {
  color: blue;
  font-size: 2.8em;
}

<p>Hello! I am a <span id="changingText">person</span></p>

Answer 2

更改文本函数每秒运行一次，for循环每次从零到长度运行，然后将最后一项设置为文本。每次调用函数时，都应该提取i变量并递增1。检查它是否超出范围，然后将其设为零..

Answer 3

这是一个缩短且有效的代码

＆＃13;

            var changingText = document.getElementById('changingText')
              ,things = ['Rap fan', 'runner', 'male', 'basketball player', 'mammal'];

            var i=0;
            setInterval(function(){
              
              if(things.length > i){
            		changingText.innerHTML = things[i];
            		i++;
              } 
            }, 1000);

＆＃13;

<p>Hello! I am a <span id="changingText">person</span></p>

＆＃13;

Answer 4

你的for循环在changeText回调中运行。它被调用的每一秒都会将文本更改为所有things，其发生得非常快，只能看到最后一项。

正确的方法是跟踪每次调用回调时显示和更新的“当前”元素。

您可以通过存储当前元素的数组索引并在每次调用时递增它来完成此操作。确保照顾数组边界。

var i = 0;
function changeText() {
  changingText.innerHTML = things[i];
  i = (i+1) % things.length;  // "wrap around" the index when array bound is reached
}

你可以完全摆脱反击：

function changeText() {
  changingText.innerHTML = things[0];  // always take currently first item
  things.push(things.shift());  // rotate items in array (put first to back)
}

我使用setInterval（）的方式有什么问题？

4 个答案: