如何使用JavaScript实现定期轮流向HTML插入数组中的文本内容

你当前的逻辑问题在于，setInterval每间隔5秒触发一次回调时，会直接遍历完数组内的所有元素，最终页面只会停留在数组最后一个值，无法实现逐个切换的效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
    <div>
        <h1>Hello</h1>
        <span id="change-text"></span>
    </div>
    <script>
        const texts = ["Alexa", "siri", "Google"]
        const textElement = document.getElementById("change-text");
        // 维护当前展示的数组索引
        let currentIndex = 0;

        function updateText() {
            // 先清空当前内容，符合"停留5秒后清除再切换"的需求
            textElement.innerText = '';
            // 短暂间隔后渲染下一个文本，可根据需求调整延迟时长
            setTimeout(() => {
                textElement.innerText = texts[currentIndex];
                // 索引自增，超出数组长度则重置为0实现循环
                // 不需要循环的话可在此处判断currentIndex等于数组长度时调用clearInterval停止定时器
                currentIndex = (currentIndex + 1) % texts.length;
            }, 200)
        }

        // 首次调用立即展示第一个内容，不需要立即展示可以删掉这行
        updateText();
        // 每5秒执行一次切换逻辑
        setInterval(updateText, 5000);
    </script>
</body>
</html>

• 定义currentIndex变量记录当前要展示的数组元素下标，初始值为0
• 每次定时器触发时，仅处理当前下标对应的文本内容，避免一次性遍历完整个数组
• 用取模运算%实现下标超出数组长度后自动回到0，达成循环轮播的效果，不需要循环可添加判断逻辑终止定时器

内容的提问来源于stack exchange，提问作者ABHIJITH EA