如何用单个函数定时更新两个<p>标签的数组内容？

现有代码的核心问题 #

• 全局索引冲突：共用的wordIndex变量会让两个数组的更新逻辑互相干扰，导致内容切换混乱。
• setInterval参数缺失：调用setInterval(updateWord,200)时没有传递updateWord所需的数组和DOM元素参数，函数执行时会因参数未定义而失效。

方案1：独立维护每个标签的更新逻辑（推荐） #

这个方案让每个标签拥有自己的索引和更新函数，避免逻辑冲突，适合两个标签独立切换内容的场景：

<div class="text">
    <p id="para1"></p>
    <p id="para2"></p>
</div>
<script>
    // 数据源
    const para1_array = ['Apple', 'orange', 'melon', 'mango'];
    const para2_array = ['benz', 'bmw', 'tata', 'ford'];
    // 获取DOM元素
    const para1 = document.getElementById('para1');
    const para2 = document.getElementById('para2');

    // 创建专属更新函数的工厂函数，通过闭包维护独立索引
    function createUpdater(dataArray, targetElement) {
        let currentIndex = 0;
        return function() {
            targetElement.innerHTML = dataArray[currentIndex];
            // 索引循环：到达数组末尾后重置为0
            currentIndex = (currentIndex + 1) % dataArray.length;
        }
    }

    // 为每个标签生成专属更新函数
    const updatePara1 = createUpdater(para1_array, para1);
    const updatePara2 = createUpdater(para2_array, para2);

    // 初始化显示内容
    updatePara1();
    updatePara2();

    // 设置定时循环更新
    setInterval(updatePara1, 200);
    setInterval(updatePara2, 200);
</script>

方案说明

• 闭包特性让每个createUpdater返回的函数都持有独立的currentIndex，不会互相影响。
• 用(currentIndex + 1) % dataArray.length简化了索引循环的判断逻辑，代码更简洁。
• 可以单独调整每个标签的更新间隔（比如把其中一个的200改成500），实现不同步切换。

方案2：同步更新两个标签内容 #

如果需要两个标签同时切换到下一组内容（比如同时显示Apple+benz、orange+bmw），可以用共用索引的方式：

<div class="text">
    <p id="para1"></p>
    <p id="para2"></p>
</div>
<script>
    const para1_array = ['Apple', 'orange', 'melon', 'mango'];
    const para2_array = ['benz', 'bmw', 'tata', 'ford'];
    const para1 = document.getElementById('para1');
    const para2 = document.getElementById('para2');
    let currentIndex = 0;

    function updateBoth() {
        // 同步更新两个标签，兼容数组长度不一致的情况
        para1.innerHTML = para1_array[currentIndex % para1_array.length];
        para2.innerHTML = para2_array[currentIndex % para2_array.length];
        currentIndex++;
    }

    // 初始化显示
    updateBoth();
    // 定时同步更新
    setInterval(updateBoth, 200);
</script>

方案说明

• 用currentIndex % 数组长度处理两个数组长度不一致的情况，确保每个数组的内容都能完整循环。
• 单个函数完成两个标签的更新，逻辑更集中，适合需要同步切换的场景。

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