我面临的3个问题是
未捕获的异常:内存不足(在firefox中) 随机加载资源失败:请求超时。 即使json数据被立即拉出,看起来像seInterval正在添加滞后以在表格数据显示或google规范中显示结果
我在代码
中做错了什么var url = 'http://example.com/json';
var sensorData;
function removeTable(id)
{
var tbl = document.getElementById(id);
if(tbl) tbl.parentNode.removeChild(tbl);
}
document.addEventListener('DOMContentLoaded', function() {
if (jscd.mobile){
removeTable("gaugeTable")
document.getElementById("gaugeTable").innerHTML = "";
}
}, false);
(function (window) {
{
var unknown = '-';
// browser
var nVer = navigator.appVersion;
// mobile version
var mobile = /Mobile|mini|Fennec|Android|iP(ad|od|hone)/.test(nVer);
}
window.jscd = {
mobile: mobile,
};
}(this));
$(window).load(function(){
setInterval(function() {
jQuery.support.cors = true;
if (jscd.mobile){
$.ajax({
url: url,
data: {
format: 'json'
},
error: function(jqXHR, textStatus, errorThrown) {
alert(textStatus + ': ' + errorThrown);
},
dataType: 'json',
crossDomain: true,
success: function(sensorData) {
// set the sensor data pulled from arduino to global variable sensorData
var tempHumidData = sensorData.arduino;
renderHTML(tempHumidData);
},
type: 'GET'
});
}
}, 10000);
});
function renderHTML(data)
{
if (data){
var sensorDataContainer = document.getElementById("displaySensorData");
var htmlString = "<table id='headTable' style='width:100%'><tr><th>Location</th><th>Temperature</th><th>Humidity</th></tr>";
for (i = 0; i < data.length; i++){
htmlString += "<tr align='center'><td>"+ data[i].location + "</td><td>" + data[i].temperatureInC + "°C/ " + data[i].temperatureInF + "°F </td> <td> " + data[i].humidity + "%</td></tr>";
}
htmlString += "</table>"
// sensorDataContainer.insertAdjacentHTML('beforeend', htmlString);
sensorDataContainer.innerHTML = htmlString;
}
}
//------------- Google Gauge -------------------//
// global variables
var chart, humidityChart, data, humidityData;
// maximum value for the gauge
var max_gauge_value = 70;
// name of the gauge
var gauge_name = 'Temperature';
var outTemp, drwngRomTemp, outHumidity, drwRomHumid;
var hoptions = {
animation:{
duration: 1000,
easing: 'inAndOut'
},
min: 0,
max: 100,
redFrom: 90, redTo: 100,
yellowFrom:75, yellowTo: 90,
minorTicks: 5
};
// load the google gauge visualization
google.load('visualization', '1', {'packages':['gauge']});
google.setOnLoadCallback(initChart);
// display the data
function displayData(outTemp, drwngRomTemp, outHumidity, drwRomHumid) {
chart.draw(data, options);
data.setValue(0, 0, gauge_name);
data.setValue(0, 1, outTemp);
data.setValue(1, 0, gauge_name);
data.setValue(1, 1, drwngRomTemp);
humidityChart.draw(humidityData, hoptions);
humidityData.setValue(0, 0, "Humidity");
humidityData.setValue(0, 1, outHumidity);
humidityData.setValue(1, 0, "Humidity");
humidityData.setValue(1, 1, drwRomHumid);
removeTable("pullingDataMsg")
}
// load the data
function loadData() {
// get the data from arduino
$.ajax({
url: url,
data: {
format: 'json'
},
error: function(jqXHR, textStatus, errorThrown) {
alert(textStatus + ': ' + errorThrown);
},
dataType: 'json',
crossDomain: true,
success: function(sensorData) {
// set the sensor data pulled from arduino to global variable sensorData
// get the data point
outTemp = sensorData.arduino[0].temperatureInC;
drwngRomTemp = sensorData.arduino[1].temperatureInC;
outHumidity = sensorData.arduino[0].humidity;
drwRomHumid = sensorData.arduino[1].humidity;
displayData(outTemp, drwngRomTemp, outHumidity, drwRomHumid);
},
type: 'GET'
});
}
// initialize the chart
function initChart() {
var initTempData = {
"cols": [
{"id":"","label":"Label","pattern":"","type":"string"},
{"id":"","label":"Temperature","pattern":"","type":"number"}
],
"rows": [
{"c":[{"v":"Temperature","f":null},{"v":-20,"f":null}]},
{"c":[{"v":"Temperature","f":null},{"v":-20,"f":null}]}
]
};
data = new google.visualization.DataTable(initTempData);
options = {
greenFrom: 10,
greenTo: 29,
redFrom: 41,
redTo: 70,
yellowFrom:30,
yellowTo: 40,
majorTicks : ['-10', '0', '10','20','30','40','50', '60', ''],
minorTicks: 5 ,
animation:{
duration: 1000,
easing: 'inAndOut'
},
min: -20,
max: 70,
greenColor: '#CCFFCC',
yellowColor: '#FFFFCC',
redColor: '#F78181'
};
chart = new google.visualization.Gauge(document.getElementById('gauge_div'));
var initHumidData = {
"cols": [
{"id":"","label":"Label","pattern":"","type":"string"},
{"id":"","label":"Humidity","pattern":"","type":"number"}
],
"rows": [
{"c":[{"v":"Humidity","f":null},{"v":0,"f":null}]},
{"c":[{"v":"Humidity","f":null},{"v":0,"f":null}]}
]
};
humidityData = new google.visualization.DataTable(initHumidData);
humidityChart = new google.visualization.Gauge(document.getElementById('humidity_gauge_div'));
//displayData(0, 0, 0, 0);
loadData();
// load new data every 10 seconds
setInterval('loadData()', 5000);
}