Question

我的网页出现问题，导致自动停止更新我的图片。该页面由一个键盘组成。输入4位数代码后，代码将通过ajax脚本发送到alarm.php。 Alarm.php更新了一个Db并返回一些值为alarmSet和alarm Triggered（0,0报警关闭，1,0报警设置，1,1报警触发）。然后，我的索引页面会根据返回的值显示一个图标，以显示警报的状态。该页面还有一个自动更新，用于检查Db并在警报状态发生变化时更新图标。这一切都很棒。控制台显示返回的值以及要显示的图像和页面响应。但如果我离开页面大约5分钟，图像就会停止更新。我仍然可以输入代码，Db仍然更新，控制台仍然显示返回值，例如0,0 greenAlarm.jpg但不显示绿色图标。看来页面已经锁定在显示器侧。如果我刷新页面，一切都还可以。我无法看到是什么导致了这一点。希望这是有道理的。

下面的索引JS脚本位于页面的标题部分

＆＃13;

<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>

＆＃13;

我还在页面上有自动更新的仪表，但是不能确定它是否同时锁定。我期待它。此脚本位于主页底部和底部

＆＃13;

<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>

＆＃13;

如果需要，我可以上传所有代码。

任何帮助都会非常感谢你

Answer 1

搞定了。服务器超载了所有请求，页面没有更新。以下是间隔为10秒的新代码。我已经拿出了仪表，因为这会导致更多的问题。尝试使用setTimeOut但无法使其正常工作。无论如何，代码现在工作。现在必须设计我自己的仪表。

＆＃13;

<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 + '&deg;C');
		$("#Gsolar").html(data.Gsolar + '&deg;C');
		$("#Grayburn").html(data.Grayburn + '&deg;C');
	 }
	 setInterval (gaugeData, 10000);
</script>

＆＃13;

页面卡在更新图像上

1 个答案: