如何在for循环中使用setTimeout更改div内容？
如何在for循环中使用setTimeout更改div内容？
提问于 2018-08-14 06:50:59
我有以下代码。我想要的标题是通过不同的文本“头#”不断变化。代码每隔一段时间就会更改它，但只更改一次。更改完成后，由于某些原因，它不会循环并继续循环。
<p class="header">Head 1</p>
<script>
var changeThis = document.getElementsByClassName("header");
for(i=0;i<10000;i++){
setTimeout(function() {
changeThis[0].innerHTML = "Head 2";
},5000)
setTimeout(function() {
changeThis[0].innerHTML = "Head 3";
},10000)
setTimeout(function() {
changeThis[0].innerHTML = "Head 4";
},15000)
setTimeout(function() {
changeThis[0].innerHTML = "Head 1";
},20000)
}
</script>回答 3
Stack Overflow用户
回答已采纳
发布于 2018-08-14 07:32:08
感谢@Andrew_Lohr (和其他人)指出了setInterval。我最终使用的最终代码如下：
var changeThis = document.getElementsByClassName("header");
var headIndex = 1;
var headTitles = ["Head 1", "Head 2", "head 3", "Head 4"];
function change() {
changeThis[0].innerHTML = headTitles[headIndex];
headIndex++;
if(headIndex > 3){
headIndex=0;
}
}
setInterval(change, 5000);Stack Overflow用户
发布于 2018-08-14 06:57:34
看起来你更喜欢使用setInterval (每隔x毫秒运行一次代码)。这使您不必在一个循环中定义如此多的setTimeouts (这可能会变得非常混乱)
这是我的意思的一个例子，它会像你想要的那样继续循环。
var changeThis = document.getElementsByClassName("header");
var headIndex = 2;
function change() {
changeThis[0].innerHTML = "Head " + headIndex;
headIndex++;
}
// run change function every 3 seconds
setInterval(change, 3000);<p class="header">Head 1</p>
Stack Overflow用户
发布于 2018-08-14 07:00:18
如果您正在寻找setInterval，请注意，如果您希望它遍历Head 1、Head 2、Head 3等，您可能会更好地使用以下内容：
const elements = ["head1", "head2"...]
let currentIndex = 0
const INTERVAL_LENGTH = 5000
setInterval(() => {
changeThis[0].innerHTML = elements[(currentIndex++)%elements.length]
}, INTERVAL_LENGTH)页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51831579
复制相关文章
相似问题