循环仅在添加跨度标记时显示数组中的最后一个字符串
Posted
技术标签:
【中文标题】循环仅在添加跨度标记时显示数组中的最后一个字符串【英文标题】：Loop is only displaying the last string in an array when adding it a span tag 【发布时间】：2017-07-24 13:53:15 【问题描述】：我想每 1.5 秒更改一次 span 标记中的单词，但到目前为止它只是显示数组“列表”中的最后一个单词。
这是我的 javascript
var list = [
"websites",
"user interfaces"
];
setInterval(function()
for(var count = 0; count < list.length; count++)
document.getElementById("word").innerhtml = list[count];
, 1500);
这里是html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<span id="word"></span>
</body>
</html>
【问题讨论】：
因为您在单个 setInterval 调用中运行完整的 for 循环。 for 循环不会在 setInterval 调用之间暂停 你不想要一个循环......每次触发间隔时它都会运行。所以每次运行相同的循环都会产生相同的结果 但是当我删除 setInterval 并且只使用 for 循环时，它会做同样的事情.. 【参考方案1】：你可能想试试这个。不循环，只是每 1.5 秒调用一次changeWord 函数。
var list = [
"websites",
"user interfaces"
];
var count = 0;
function changeWord()
document.getElementById("word").innerHTML = list[count];
count = count < list.length-1 ? count+1 : 0;
setInterval(function() changeWord(); , 1500);<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<span id="word"></span>
</body>
</html>【讨论】：
【参考方案2】：您不需要 for 循环，只需使用 setInterval、您的 counter 或使用数组操作更简单：
var list = [
"websites",
"user interfaces",
"cool neh?"
];
var count = 0; // Separate your count
function changeWord() // Separate your concerns
document.getElementById("word").innerHTML = list[count];
count = ++count % list.length; // Increment and loop counter
changeWord(); // First run,
setInterval(changeWord, 1500); // Subsequent loops<span id="word"></span>如果您不想使用counter，而是使用数组操作：
var list = [
"websites",
"user interfaces",
"cool neh?"
];
var ELWord = document.getElementById("word"); // Cache elements you use often
function changeWord()
ELWord.innerHTML = list[0]; // Use always the first key.
list.push(list.shift()); // Push the first key to the end of list.
changeWord();
setInterval(changeWord, 1500);<span id="word"></span>P.S：反之则使用list.unshift(list.pop())，如您所见here。
在性能方面，使用 counter 的解决方案应该更快，但您的 Array 很小，因此差异不会引起任何问题。
【讨论】：
谢谢，这就是我要找的！ @Jake123 如果您有兴趣，我还添加了一种（正确的）方法来使用数组操作 - 而不是使用counter。不客气。快乐编码
好的，谢谢你，还有一个问题，有没有办法让每个单词淡入？
@Jake123 当然，你可以从你的元素中切换一个类...可以在这里找到使用 jQuery 的更好方法：***.com/questions/20695877/…【参考方案3】：
最好使用setTimeout。每次迭代都应该有自己的超时时间。 See also
(() =>
const words = document.querySelector('#words');
typeWords([
"web sites",
"user interfaces",
"rare items",
"other stuff",
"lizard sites",
"ftp sites",
"makebelief sites",
"fake news sites",
"et cetera"
]);
function typeWords(list)
list.push(list.shift()) && (words.innerHTML = list[list.length-1]);
setTimeout(() => typeWords(list), 1500);
)();<div id="words"></div>【讨论】：
【参考方案4】：您的代码的问题是，每当调用间隔函数时，都会执行循环并打印元素，因为您在每次迭代时都替换了整个 innerHtml。 如果您想在间隔后一次又一次地打印整个列表元素，可以尝试以下代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<span id="word"></span>
</body>
javascript代码：
var list = [
"websites",
"user interfaces"
];
var count=0;
function print()
document.getElementById("word").innerHTML = list[count];
count += 1;
count%=list.length;
setInterval( print(), 1000);
【讨论】：
【参考方案5】：我将通过setTimeout() 完成这项工作，如下所示，
function loopTextContent(a, el, dur = 1500)
var i = -1,
len = a.length,
STID = 0,
looper = _ => (el.textContent = a[i = ++i%len], STID = setTimeout(looper,dur));
looper();
return _ => STID;
var list = ["websites", "user interfaces", "user experience", "whatever"],
getSTID = loopTextContent(list, document.getElementById("word"));
setTimeout(_ => clearTimeout(getSTID()),10000);<span id="word"></span>【讨论】：
以上是关于循环仅在添加跨度标记时显示数组中的最后一个字符串的主要内容，如果未能解决你的问题，请参考以下文章
如何在按钮单击并插入跨度标记时显示 jquery datepicker