Javascript AJAX-基于间隔进行API调用

我有两个AJAX函数指向不同的

Node.js

路由。第二个AJAX调用在单击按钮时触发。 要求-第二个AJAX功能需要从后端节点应用程序接收实时数据，并每隔

5秒用新数据重新加载页面

index.html

<script type="text/javascript">
    $(document).ready(function(){       
        $.ajax({
            url: "http://localhost:8070/api/route1",
            type: 'POST',
            dataType:'json',                                         
            success: function(res) {
                // Some function
            }
        });   
        $("#myButton").click(function(){
            $.ajax({
                url: "http://localhost:8070/api/route2",
                type: "POST",
                dataType: "json",
                success: function (res) { 
                    //This part needs to be excuted/make API call at each interval 
                    //It gets the updated data from backed and reloads every 5 secs


                    //Below is the logic where I am appending to HTML table
                    //I don't want this part to be appended with new data wrt setTimeout()
                    $.each(res.result1, function(key, value) {
                        console.log("Index",key);
                        console.log("Item",value);                          
                        tableData='<tr><td><a onclick="demoDiv()">'+value+'</a></td><td>'+res.result2[key]+'</td></tr>';
                        $('#table1').append(tableData);                            
                    }); 

                    //No changes need for rest of the code

                },
                beforeSend: function() {
                    //ABC
                },
                complete: function() {
                    //ABC
                },
            });  
        });
    });           
</script>


$（文档）.ready（函数（）{
$.ajax({
url:“http://localhost:8070/api/route1",
键入：“POST”，
数据类型：'json'，
成功：功能（res）{
//某些功能
}
});   
$（“#我的按钮”）。单击（函数（）{
$.ajax({
url:“http://localhost:8070/api/route2",
类型：“POST”，
数据类型：“json”，
成功：功能（res）{
//此部分需要在每个时间间隔执行/进行API调用
//它从备份中获取更新的数据，并每5秒重新加载一次
//下面是我添加到HTML表的逻辑
//我不希望此部分附加新数据wrt setTimeout（）
$.each（res.result1，函数（键，值）{
控制台日志（“索引”，键）；
console.log（“项”，值）；
tableData=''+value+''+res.result2[key]+''；
$（'#表1'）。追加（表数据）；
}); 
//其余代码无需更改
},
beforeSend:function（）{
//ABC
},
完成：函数（）{
//ABC
},
});  
});
});           

我该如何利用
setInterval（）
，
setTimeout（）
或者完全不同的方法呢？
像这样。我不建议在ajax上使用setInterval

const route2=function（）{//or（）=>{
$.ajax({
url:“http://localhost:8070/api/route2",
类型：“POST”，
数据类型：“json”，
成功：功能（res）{
设tableData=[]；
$.each（res.result1，函数（键，值）{
tableData.push（“”+value+“”+res.result2[key]+“”）；
});
$（'#restab'）.html（tableData.join（“”）；//使用.html（）不追加
//这里是函数的其余部分
},
beforeSend:function（）{
//ABC
},
完成：函数（）{
设置超时（路由2，5000）
}
});
};
$（函数（）{
路由2（）；
})

循环示例


const res={
结果1:['127.0.0.1:27018'、'127.0.0.1:27019'、'127.0.0.1:27020']，
结果2:[‘主要’、‘次要’、‘次要’]
}
让tableData=[]
$.each（res.result1，函数（键，值）{
tableData.push（“”+value+“”+res.result2[key]+“”）；
});
$（'#restab'）.html（tableData.join（“”）；

主机名
地位
代码对我来说运行得很好，除了我的
success
中有几个函数，在每次API调用时都将数据附加到
HTML表中，我不希望发生这种情况。是否有办法防止这种情况发生，即每次在5秒后进行API调用时，都不应该将新数据附加到表中。Rest看起来不错。Also我不完全理解ECMA脚本，我想坚持Vanilla JS的传统语法。我在success中有几个函数，它们根据从后端获取的数据生成图表。其中一个是处理HTML表数据，我不想在每个setInterval（）上更改这些数据.Rest应该反映新数据，而不是HTML表附加函数。希望这能让我的预期更加透明。