我的网页出现问题，导致自动停止更新我的图片。该页面由一个键盘组成。输入4位数代码后，代码将通过ajax脚本发送到alarm.php。 Alarm.php更新了一个Db并返回一些值为alarmSet和alarm Triggered（0,0报警关闭，1,0报警设置，1,1报警触发）。然后，我的索引页面会根据返回的值显示一个图标，以显示警报的状态。该页面还有一个自动更新，用于检查Db并在警报状态发生变化时更新图标。这一切都很棒。控制台显示返回的值以及要显示的图像和页面响应。 但如果我离开页面大约5分钟，图像就会停止更新。我仍然可以输入代码，Db仍然更新，控制台仍然显示返回值，例如0,0 greenAlarm.jpg但不显示绿色图标。看来页面已经锁定在显示器侧。如果我刷新页面，一切都还可以。我无法看到是什么导致了这一点。希望这是有道理的。
下面的索引JS脚本位于页面的标题部分
<script> // this script will get the data from alarm.php
var count = 0;
setInterval(function (){
$.ajax({
type: "GET",
url:"alarm.php",
data:"json",
success: function(data){
myObj = JSON.parse(data); // pass the data returned to array myObject
console.log(myObj)
display(myObj);// send the data outside this function to be worked with
}
});
}, 1000);
//below function is needed to change a img depending on returned data from DB
function display(){
function image(thisImg){ // get image from if statements via return statement
document.getElementById("image").src = thisImg;
console.log(thisImg);
}
if (myObj[0] == 0){
image("greenAlarm.jpg"); // alarm off
count = 0;
}
if (myObj[0] == 1 && myObj[1] == 0 && count < 2 || count > 3){
image("blueAlarm.jpg"); // alarm set
count = 0;
}
count = count + 1;
console.log(count);
// alarm triggered alternate between two images
if (myObj[0] == 1 && myObj[1] == 1 && count == 2){
image("alarmTrig1.jpg");
}
if (myObj[0] == 1 && myObj[1] == 1 && count == 3){
count = 1;
image("alarmTrig2.jpg");
}
}
</script>
<script type="text/javascript">
function addCode(key){
var code = document.forms[0].code;
if(code.value.length < 4){
code.value = code.value + key;
}
if(code.value.length == 4){
document.getElementById("message").style.display = "block";
setTimeout(alarm, 1000, code.value);
}
}
function alarm(code){
$.ajax({
method: "POST",
url: "alarm.php",
data: {code: code},
cache: false,
success: function(responseText) {
console.log(responseText) // show returned text in console
}
})
emptyCode();
document.getElementById("message").style.display = "none";
}
function submitForm(){
document.forms[0].submit();
}
function emptyCode(){
document.forms[0].code.value = "";
}
</script>
我还在页面上有自动更新的仪表，但是不能确定它是否同时锁定。我期待它。此脚本位于主页底部和底部
<script>
setInterval(function(){
$.ajax({
url:"data.php",
dataType:"json",
success: function(data){
g1.refresh(data.Gwater);
g2.refresh(data.Gsolar);
g3.refresh(data.Grayburn);
}
});
}, 3000)
var g1 = new JustGage({
id: "Gwater",
value: 0,
min: 0,
max: 75,
label: "Hot Water",
labelFontColor: "#00B1FF",
valueFontColor: "#00B1FF",
pointer:1
});
var g2 = new JustGage({
id: "Gsolar",
value: 0,
min: 0,
max: 100,
label: "Solar Temp",
labelFontColor: "#00B1FF",
valueFontColor: "#00B1FF",
pointer:1
});
var g3 = new JustGage({
id: "Grayburn",
value: 0,
min: 0,
max: 100,
label: "Rayburn Temp",
labelFontColor: "#00B1FF",
valueFontColor: "#00B1FF",
pointer:1
});
</script>
如果需要，我可以上传所有代码。
任何帮助都会非常感谢你
答案 0 :(得分：0)
搞定了。服务器超载了所有请求，页面没有更新。以下是间隔为10秒的新代码。我已经拿出了仪表，因为这会导致更多的问题。尝试使用setTimeOut但无法使其正常工作。无论如何，代码现在工作。现在必须设计我自己的仪表。
<script>
var gaugeData = function(){
var response = 0;
$.ajax({
url:"data.php",
dataType:"json",
success: function(data){
response = (data);
console.log(response);
if (response.id == 1){
display(response);// send the data outside this function to be worked with
} else{
setTimeout (gaugeData, 5000);
}
}
});
}
function display(data){
console.log(data.AlarmSet);
var thisImg = 0;
if (data.AlarmSet == 0){
thisImg = "greenAlarm.jpg"; // alarm off
}
if (data.AlarmSet == 1){
thisImg = "blueAlarm.jpg"; // alarm on
}
$("#image").attr("src", thisImg);
$("#Gwater").html(data.Gwater + '°C');
$("#Gsolar").html(data.Gsolar + '°C');
$("#Grayburn").html(data.Grayburn + '°C');
}
setInterval (gaugeData, 10000);
</script>