Vanilla JavaScript:Timed innerHTML无法按预期工作

Question

let text = ["Words", "Here"];

setInterval(() => {
    var currentItem = 0;

    if (!(currentItem > text.length)) {
        document.getElementById("scrollingText").innerHTML = text[currentItem];
        currentItem++;
        console.log("Updated to: " + currentItem);
    } else {
        currentItem = 0;
    }
}, 1000);

我正在创建一个简单的段落,页面上的ID为"scrollingText",这个JavaScript意味着每1秒更新一次数组列表'text'中的下一项,如果它超过了数组中的元素数量列表它将重置计数器.

我有脚本当前将scrollingText更新为第一项,它在浏览器控制台中表明它已经这样做了,但是之后它完全忽略了innerHTML代码并且只是继续增加currentItem,甚至没有通过currentItem超过阵列长度检查.

任何人都有任何想法为什么这不能按预期运作？

Answer 1

你currentItem不坚持; 你0每次运行函数时都会重新初始化它.把它放在函数之外,这样只有一个绑定到该变量.

但是还有另外一个问题:你的if (!(currentItem > text.length)) {测试将通过,如果currentItem === text.length在这种情况下text[currentItem]会undefined.你可以改为

if (currentItem < text.length)

但是,页面上的最后一个项目将有2秒(相比之下,页面上的每个其他项目都有1秒).你可能会考虑重新currentItem对0在分配给相同的块scrollingText.

别的东西要记住的是,除非你故意插入HTML标记,它更好地分配textContent比innerHTML.(textContent更快,更安全,更可预测):

const text = ["Words", "Here"];
let currentItem = 0;
const scrollingText = document.getElementById("scrollingText");
setInterval(() => {
  scrollingText.textContent = text[currentItem];
  currentItem = (currentItem + 1) % text.length;
}, 1000);

<div id="scrollingText"></div>