我正在尝试创建一组规则，其中来自API的数据以6种不同的API返回html页面。因此，我需要的是每隔5秒显示一次新数据来替换旧数据。
这是我到目前为止所做的：
这是小提琴：https://jsfiddle.net/tohfz61x/3/
这是我所做的，添加了setInterval function，但没有用。
在此版本中，它一次获取所有数据并显示循环的最后一个。但我需要一次显示1直到6次。
因此，基本上，如果第一个结果是$ 50，则在几秒钟后，它应更改为API中的另一个值（例如，$ 30）。
您可以在initLoadData()内部调用setTimeout()，其条件如下。
var value = 1;
initLoadData();
function initLoadData() {
var ajaxTime = new Date().getTime();
var dataURL = "https://adler.blockrize.io/data/" + value;
$.getJSON(dataURL,function(response,status,t) {
var rewardsEarnedHolder = $('#rewardsEarned');
var totalReward = '<span class="price">$' + response.RewardsEarned.TotalReward + '</span>';
rewardsEarnedHolder.html(totalReward);
console.log(dataURL);
value++;
if (value <= 6) {
setTimeout(function() {
initLoadData(value);
},2000);
}
});
}<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<div class="transaction-section bg-dark text-white pb-4">
<h2>Transaction History</h2>
<div id="rewardsEarned"></div>
</div>,
您可以在API调用完成后调用 setTimeout() 函数
var i = 1;
initLoadData();
function initLoadData() {
var dataURL = "https://adler.blockrize.io/data/" + i;
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
let data = JSON.parse(xhttp.responseText);
document.getElementById("price").innerHTML = data.RewardsEarned.TotalReward;
i = i + 1;
if (i <= 6) {
setTimeout(function() {
initLoadData();
},2000);
}
}
};
xhttp.open("GET",dataURL,true);
xhttp.send();
}<div class="transaction-section bg-dark text-white pb-4">
<h2>Transaction History</h2>
<div id="rewardsEarned">$<span id="price">00.00</span></div>
</div>,
您可以使用延迟功能，只需在代码中进行这些更改
替换此：
rewardsEarnedHolder.html(totalReward);
使用此代码
rewardsEarnedHolder.html(totalReward).delay(5000);