所以我有一个 JSON 数据库，它根据我更新页面内容的方式经常更新。目前我正在使用此脚本进行重新加载：
var previous = null;
var current = null;
setInterval(function() {
$.getJSON("sampledatabase.json", function(json) {
current = JSON.stringify(json);
if (previous && current && previous != current) {
console.log('refresh');
location.reload();
}
previous = current;
});
}, 1200);
问题是它应该用于全屏监控大屏幕，因此重新加载时眨眼会让人分心。
在刷新时（发生在数据库更新时），我正在更改 div 的类，并像这样从数据库中填充更多数据（只是代码的一部分）
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
var i;
var output = document.getElementsByClassName("env");
var myObj = JSON.parse(this.responseText);
for (i = 0; i < output.length; i++) {
if (myObj.instances[i].status == "UP") {
output[i].classList.add("passed")
} else output[i].classList.add("notPassed")
output[i].innerHTML = "<span class=\"originalsize\">" + myObj.instances[i].id + "</SPAN>" + "<br>" + myObj.instances[i].time
}
}
};
xmlhttp.open("GET", "sampledatabase.json", true);
xmlhttp.send();
有没有办法只更新 div，这样我就不会在页面重新加载时出现令人不快的闪烁？
您可以$.ajax()按照W3 Schools 的说明使用 jQuery 的方法。
这是我的JSFiddle
在我的 Fiddle 中，我还使用了$.each()方法来解析JSON数据并将其附加到 div 中。
function GetPosts() {
$.ajax({
dataType: "json",
url: "https://jsonplaceholder.typicode.com/posts",
success: function(data) {
//console.log(data);
$.each(data, function(index, item) {
console.log(item);
$('.container').append('<div class="posts"><div id="post_container"><h3 id="post_title">' + item.title + '</h3><hr><div id="post_body">' + item.body + '</div><hr><span id="post_userid">' + item.id + '</span></div></div>');
});
}
});
}
您还可以使用setInterval()函数来启用自动更新。
在这种情况下，您可以执行以下操作：
let interval;
let time = 5000; // 5 seconds
function startRefresh() {
interval = setInterval(GetPosts(), time);
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句