AJAX、JS、setInterval。多次显示数据答案

【问题标题】：AJAX, JS, setInterval. Displaying data multiple timesAJAX、JS、setInterval。多次显示数据
【发布时间】：2021-11-15 10:59:01
【问题描述】：

您好，感谢您阅读我的帖子

我创建了一个基本的 AJAX。如下所示：

    <div id="name"></div>

    <script>
        async function get_name() {
            let server = await fetch("pageOneName")
            let data = await server.text()
            document.querySelector("#name").innerText = data
        }

        setInterval(get_name, 3000)
    </script>

到目前为止，它并没有做太多事情，只是从文件/url 中检索我的名字

我想做的是……

在多行中多次显示我的名字（最多 5 次）。 3000 之后的一个名字，4000 之后的另一个名字，等等。

喜欢。

迈克尔·安德森
迈克尔·安德森
迈克尔·安德森

我的方法是什么？

【问题讨论】：

追加到innerText而不是替换它。
使用一个全局计数器变量来计算重复次数。当计数达到 5 时，使用clearInterval() 停止计时器。

标签： javascript ajax settimeout setinterval

【解决方案1】：

您只需要创建一个 3000、4000、5000 的间隔以在 3 秒后每秒创建一个名称，然后创建一个计数器来计算限制，当达到限制时清除间隔。

// initialize the variables.
var counter = 0;
var intervals = [];

// clear all intervals
function clearAllIntervals() {
    for (var id of intervals) {
        clearInterval(id);
    }
}

async function get_name() {
    let server = await fetch("pageOneName");
    let data = await server.text();

    let p = document.createElement("p");
    p.append(data);
    document.querySelector("#name").append(p);
    counter +=1;
    
    // Clear the counter and the intervals show 5 names.
    if (counter === 5){
        clearAllIntervals();
        counter = 0;    
    }
}

intervals.push(setInterval(get_name, 3000));
intervals.push(setInterval(get_name, 4000));
intervals.push(setInterval(get_name, 5000));

<html> 
<body>
  <div id="name"></div>
</body>
</html>

【讨论】：