如何使用AJAX与setInterval实现数据按间隔逐行多次分批展示

实现方案 #

你可以按以下思路修改代码：

1. 把原本的单文本节点容器替换为列表容器，方便逐行追加内容
2. 替换固定间隔的setInterval为递归调用的setTimeout，动态调整每次请求的间隔
3. 每次拿到接口返回的姓名后追加到列表末尾，超出5条时自动移除最早的一条，或者累计追加满5条后停止更新

修改后的完整代码

<ul id="nameList"></ul>

<script>
// 初始间隔3000ms，每次递增1000ms
let currentInterval = 3000
// 最多展示5条
const MAX_COUNT = 5
// 已添加的条数计数
let addedCount = 0

async function get_name() {
    try {
        const server = await fetch("pageOneName")
        const name = await server.text()
        const list = document.querySelector("#nameList")
        
        // 创建新的列表项追加到末尾
        const li = document.createElement("li")
        li.innerText = name
        list.appendChild(li)
        addedCount++

        // 超出最大条数时移除最早的一条
        if (list.children.length > MAX_COUNT) {
            list.removeChild(list.firstChild)
        }

        // 满5条后如果不需要继续更新可以直接return终止，去掉这段就会循环保留最新5条
        if (addedCount >= MAX_COUNT) {
            return
        }

        // 计算下一次的间隔，递归调用
        currentInterval += 1000
        setTimeout(get_name, currentInterval)
    } catch (err) {
        // 请求出错时可以根据需要加重试逻辑，这里简单打印错误
        console.error('拉取姓名失败', err)
    }
}

// 首次调用
setTimeout(get_name, currentInterval)
</script>

核心修改点说明

• 用动态计算间隔的递归setTimeout替代固定间隔的setInterval，满足间隔依次递增1000ms的要求
• 不再直接覆盖容器内容，改为每次创建新的列表项追加，实现逐行展示的效果
• 增加数量控制逻辑，最多保留5条展示内容，可根据需求选择满5条停止或循环更新最新5条

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