使用javascript每1秒无限次更改跨度的值

我试图在每一秒无限时间后改变跨度的值，但我不知道如何完成这项任务。现在我正在使用setTimeout函数，当值结束时，它会一次性更改所有值

   <span id="second-span"></span>

   <script>
    setTimeout('document.getElementById("second-span").innerHTML = "Creator ";', 0);
    setTimeout('document.getElementById("second-span").innerHTML = "Foodie ";', 3000);
    setTimeout('document.getElementById("second-span").innerHTML = "Traveller";', 6000);
    setTimeout('document.getElementById("second-span").innerHTML = "Fitness Freak";', 9000);
    setTimeout('document.getElementById("second-span").innerHTML = "Makeup Genie";', 12000);
    setTimeout('document.getElementById("second-span").innerHTML = "Vlogger";', 15000);
    setTimeout('document.getElementById("second-span").innerHTML = "Filmmaker";', 18000);
    setTimeout('document.getElementById("second-span").innerHTML = "Artist  ";', 21000);
    setTimeout('document.getElementById("second-span").innerHTML = "Narrator";', 24000); 

</script>

setTimeout（'document.getElementById（“第二个span”）.innerHTML=“Creator”，0）；
setTimeout（'document.getElementById（“第二个span”）.innerHTML=“Foodie””，3000）；
setTimeout（'document.getElementById（“第二个span”）.innerHTML=“Traveler”，6000）；
setTimeout（'document.getElementById（“第二个span”）.innerHTML=“Fitness Freak”，9000）；
setTimeout（'document.getElementById（“第二个span”）.innerHTML=“化妆精灵”，12000）；
setTimeout（'document.getElementById（“第二个span”）.innerHTML=“Vlogger””，15000）；
setTimeout（'document.getElementById（“第二个span”）.innerHTML=“Filmmaker”，18000）；
setTimeout（'document.getElementById（“第二个span”）.innerHTML=“Artist”，21000）；
setTimeout（'document.getElementById（“第二个span”）.innerHTML=“叙述者”，24000）；

---

您能告诉我如何无限次地完成这项任务吗？我是javascript新手，所以请指导我，我将非常感谢您。

您可以使用

setInterval

function func() {
    // Do something here
}

setInterval(func,1000) // Runs func function every 1 second

---

您可以使用

setInterval

function func() {
    // Do something here
}

setInterval(func,1000) // Runs func function every 1 second

使用

setInterval（）

而不是

setTimeout（）

。 但是你必须知道，这两个函数都有两个参数，一个是回调函数，而不是字符串。另一个参数是调用回调的毫秒数。在

setInterval

的情况下，回调函数将按照您在第二个参数中指定的每n毫秒触发一次

您还需要稍微缩短代码以使其可读。没有必要经常重复你自己

var span = document.getElementById("second-span");

setInterval(function(){ span.innerHTML = "Creator ";     }, 0);
setInterval(function(){ span.innerHTML = "Foodie ";      }, 3000);
setInterval(function(){ span.innerHTML = "Traveller";    }, 6000);
setInterval(function(){ span.innerHTML = "Fitness Freak";}, 9000);
setInterval(function(){ span.innerHTML = "Makeup Genie"; }, 12000);
setInterval(function(){ span.innerHTML = "Vlogger";      }, 15000);
setInterval(function(){ span.innerHTML = "Filmmaker";    }, 18000);
setInterval(function(){ span.innerHTML = "Artist  ";     }, 21000);
setInterval(function(){ span.innerHTML = "Narrator";     }, 24000);

使用

setInterval（）

而不是

setTimeout（）

。 但是你必须知道，这两个函数都有两个参数，一个是回调函数，而不是字符串。另一个参数是调用回调的毫秒数。在

setInterval

的情况下，回调函数将按照您在第二个参数中指定的每n毫秒触发一次

您还需要稍微缩短代码以使其可读。没有必要经常重复你自己

var span = document.getElementById("second-span");

setInterval(function(){ span.innerHTML = "Creator ";     }, 0);
setInterval(function(){ span.innerHTML = "Foodie ";      }, 3000);
setInterval(function(){ span.innerHTML = "Traveller";    }, 6000);
setInterval(function(){ span.innerHTML = "Fitness Freak";}, 9000);
setInterval(function(){ span.innerHTML = "Makeup Genie"; }, 12000);
setInterval(function(){ span.innerHTML = "Vlogger";      }, 15000);
setInterval(function(){ span.innerHTML = "Filmmaker";    }, 18000);
setInterval(function(){ span.innerHTML = "Artist  ";     }, 21000);
setInterval(function(){ span.innerHTML = "Narrator";     }, 24000);

---

将所有值存储在列表中。然后启动一个函数，该函数在某个索引处选取一个值，更新该索引，并在一秒钟内重新启动自身

const value=['Creator'，'Foodie'，'etc']
设指数=0
常量更改=（）=>{
document.getElementById（'to-change'）.innerHTML=values[index]；
索引=++索引%values.length；
设置超时（更改，1000）；
}
change（）

---

将所有值存储在列表中。然后启动一个函数，该函数在某个索引处选取一个值，更新该索引，并在一秒钟内重新启动自身

const value=['Creator'，'Foodie'，'etc']
设指数=0
常量更改=（）=>{
document.getElementById（'to-change'）.innerHTML=values[index]；
索引=++索引%values.length；
设置超时（更改，1000）；
}
change（）

---

您可以使用setInterval，但也不推荐使用。建议递归使用setTimeout：

<span id="second-span"></span>

<script>
  function cycleArr (elm, arr, int) {
    const next = (idx => arr => idx = ++idx % arr.length)(-1)

    function* getItems (arr) {
      for (;;) yield arr[next(arr)]
    }

    +function cycle (out, items, int) {
      out.textContent = items.next().value
      setTimeout(cycle, int, out, items, int)
    }(elm, getItems(arr), int)
  }

  let arr = [
    'Creator',
    'Foodie',
    'Traveller',
    'Fitness Freak',
    'Makeup Genie',
    'Vlogger',
    'Filmmaker',
    'Artist',
    'Narrator'
  ]
  let int = 1 * 1000 // Every 1 sec.
  let elm = document.querySelector('#second-span')

  cycleArr(elm, arr, int)
</script>

功能循环环（elm、arr、int）{
常量next=（idx=>arr=>idx=++idx%arr.length）（-1）
函数*getItems（arr）{
对于（；；）收益率arr[next（arr）]
}
+功能循环（输出、项目、输入）{
out.textContent=items.next（）.value
设置超时（周期、整数、输出、项目、整数）
}（elm、getItems（arr）、int）
}
设arr=[
“创造者”，
“美食家”，
“旅行者”，
“健身狂”，
“化妆精灵”，
“Vlogger”，
“电影制片人”，
“艺术家”，
“叙述者”
]
设int=1*1000//每1秒。
设elm=document.querySelector（“#第二个span”）
自行车耳环（榆树、arr、内景）

您可以使用setInterval，但也不推荐使用。建议递归使用setTimeout：

<span id="second-span"></span>

<script>
  function cycleArr (elm, arr, int) {
    const next = (idx => arr => idx = ++idx % arr.length)(-1)

    function* getItems (arr) {
      for (;;) yield arr[next(arr)]
    }

    +function cycle (out, items, int) {
      out.textContent = items.next().value
      setTimeout(cycle, int, out, items, int)
    }(elm, getItems(arr), int)
  }

  let arr = [
    'Creator',
    'Foodie',
    'Traveller',
    'Fitness Freak',
    'Makeup Genie',
    'Vlogger',
    'Filmmaker',
    'Artist',
    'Narrator'
  ]
  let int = 1 * 1000 // Every 1 sec.
  let elm = document.querySelector('#second-span')

  cycleArr(elm, arr, int)
</script>

功能循环环（elm、arr、int）{
常量next=（idx=>arr=>idx=++idx%arr.length）（-1）
函数*getItems（arr）{
对于（；；）收益率arr[next（arr）]
}
+功能循环（输出、项目、输入）{
out.textContent=items.next（）.value
设置超时（周期、整数、输出、项目、整数）
}（elm、getItems（arr）、int）
}
设arr=[
“创造者”，
“美食家”，
“旅行者”，
“健身狂”，
“化妆精灵”，
“Vlogger”，
“电影制片人”，
“艺术家”，
“叙述者”
]
设int=1*1000//每1秒。
设elm=document.querySelector（“#第二个span”）
自行车耳环（榆树、arr、内景）

您可以使用setInterval。但你为什么要这么做？在“叙述者”之后是什么？你如何选择下一个单词“无限次”？重复一些值列表？：）我想不断重复这9个值，但不知道怎么做。你可以使用setInterval。但你为什么要这么做？在“叙述者”之后是什么？你如何选择下一个单词“无限次”？重复一些值列表？：）我想不断重复这9个值，但不知道怎么做。我打算发布类似的内容。你打败了我lol+1非常感谢你的帮助，我在过去的3个小时里一直在解决这个问题，再次非常感谢。很高兴我能提供帮助。我们将发布类似的内容。谢谢你的帮助，我在过去的三个小时里一直在解决这个问题。再次感谢。很高兴我能帮上忙。谢谢你的帮助，但那一个对我不起作用。谢谢你的帮助，但那一个对我不起作用。