JavaScript实现多元素内容循环更新：优化与最佳实践

<div class="text">
    <p id="para1"></p>
    <p id="para2"></p>
</div>
<script>
    // 数据数组
    let para1_array = ['Apple', 'orange', 'melon', 'mango'];
    let para2_array = ['benz', 'bmw', 'tata', 'ford'];

    // 获取DOM元素
    const para1 = document.getElementById('para1');
    const para2 = document.getElementById('para2');

    // 全局索引变量
    let wordIndex = 0;

    // 更新内容的函数
    function updateWord(para_array, para) {
        const currentWord = para_array[wordIndex];
        para.innerHTML = currentWord;
        wordIndex++; // 每次调用都递增全局索引
        if (wordIndex >= para_array.length) {
            wordIndex = 0;
        }
    }

    // 初始化调用
    updateWord(para1_array, para1);
    updateWord(para2_array, para2);

    // 定时器调用 (错误用法)
    setInterval(updateWord, 200);
</script>

// ... (之前的 para1_array, para2_array, para1, para2 定义不变)

// 修正后的定时器调用
setInterval(() => {
    updateWord(para1_array, para1); // 每次定时器触发时，分别更新两个元素
    updateWord(para2_array, para2);
}, 200);

/**
 * 更新指定HTML元素的内容，使其从给定数组中循环展示下一个值。
 *
 * @param {Array<string>} para_array - 包含待显示字符串的数组。
 * @param {HTMLElement} para - 目标HTML元素（例如 <p> 标签）。
 */
function updateWord(para_array, para) {
    // 获取当前元素显示的文本内容
    const currentText = para.innerHTML;

    // 在数据数组中查找当前文本的索引
    let currentIndex = para_array.indexOf(currentText);

    // 如果当前文本未找到（例如，首次加载时为空），则从数组开头开始
    if (currentIndex === -1 || currentText === "") {
        currentIndex = 0;
    } else {
        // 移动到下一个索引
        currentIndex++;
    }

    // 如果索引超出数组长度，则重置为0，实现循环
    if (currentIndex >= para_array.length) {
        currentIndex = 0;
    }

    // 更新元素的innerHTML为数组中新索引对应的值
    para.innerHTML = para_array[currentIndex];
}