[英]Web page becomes unresponsive and crashes after few minutes
My web page becomes unresponsive, freezes and crashes after a few minutes when hosted on a server but work fine when running on localhost. 在托管于服务器上的几分钟后,我的网页变得无响应,冻结并崩溃,但在localhost上运行时,它可以正常工作。 I am getting api datas from a Flask Server(app)
我正在从Flask服务器(应用程序)获取api数据
The api engine is working on Flask and pulling data in form of JSON in every 1 second. api引擎正在Flask上运行,并每1秒以JSON形式提取数据。 Also updating google map marker based on the Lat Lon got from api
还基于从API获取的Lat Lon更新Google地图标记
I expect that the web page don't freeze or becomes unresponsive 我希望网页不会冻结或无法响应
var map_lat = 28.644800;
var map_lon = 77.216721;
var head = 0;
var ngUrl = "http://*******.com/";
function httpGet(theUrl) {
var xmlHttp = new XMLHttpRequest();
xmlHttp.open("GET", theUrl, false); // false for synchronous request
xmlHttp.send(null);
return xmlHttp.responseText;
}
function buttonFunctionPR(id) {
url = ngUrl.concat("x1/");
var response = httpGet(url + id);
response = JSON.parse(response);
document.getElementById("message").innerHTML = response['msg'];
}
hcFunOne = async() => {
url = ngUrl.concat("x5/");
var response = await httpGet(url);
response = JSON.parse(response);
document.getElementById("alti").innerHTML = response['msg'];
console.log(response['msg']);
setTimeout(() => {
hcFunOne();
}, 1000)
}
hcFunTwo = async() => {
url = ngUrl.concat("x6/");
var response = await httpGet(url);
response = JSON.parse(response);
var dataLB = response['msg2']
var dataLB = dataLB.split("/");
var htmlrespL = "Lattitude : <b>" + response['msg1'] + "</b>"
var htmlrespB = "<b>Battery</b><hr class='hru hrusm'>Vlts : " + dataLB[0] + "<br>Level : " + dataLB[2] + " % ";
document.getElementById("lat").innerHTML = htmlrespL;
document.getElementById("batt").innerHTML = htmlrespB;
window['map_lat'] = parseFloat(response['msg1']);
setTimeout(() => {
hcFunTwo();
}, 1000)
}
hcFunThree = async() => {
url = ngUrl.concat("x7/");
var response = await httpGet(url);
response = JSON.parse(response);
var htmlresp = "Longitude : <b>" + response['msg'] + "</b>"
document.getElementById("lon").innerHTML = htmlresp;
window['map_lon'] = parseFloat(response['msg']);
setTimeout(() => {
hcFunThree();
}, 1000)
}
hcFunFour = async() => {
url = ngUrl.concat("x8/");
var response = await httpGet(url);
response = JSON.parse(response);
//var data = response.split("/");
var htmlresp = "<b>System Usage</b><hr class='hru hrusm'>CPU : " + response['cpu'] + "%<br>RAM : " + response['ram'] + "%";
document.getElementById("cpu").innerHTML = htmlresp;
setTimeout(() => {
hcFunFour();
}, 1000)
}
hcFunFive = async() => {
url = ngUrl.concat("x9/");
var response = await httpGet(url);
response = JSON.parse(response);
window['head'] = parseFloat(response['msg']);
//console.log(head);
//console.log(typeof window['head']);
setTimeout(() => {
hcFunFive();
}, 1000)
}
setTimeout(function() {
hcFunOne();
hcFunTwo();
hcFunThree();
hcFunFour();
hcFunFive();
}, 500);
// ------MAP WORK-----
var map;
var markers = [];
function initMap() {
var haightAshbury = {
lat: window.map_lat,
lng: window.map_lon
};
map = new google.maps.Map(document.getElementById('map'), {
zoom: 18,
center: haightAshbury,
mapTypeId: 'terrain'
});
setInterval(function() {
var lats = window.map_lat;
var lngs = window.map_lon;
map.setCenter({
lat: lats,
lng: lngs
});
var temp2 = {
lat: lats,
lng: lngs
}
/
addMarker(temp2);
console.log(head);
}, 2000);
addMarker(haightAshbury);
}
function addMarker(location) {
setMapOnAll(null);
var marker = new google.maps.Marker({
position: location,
map: map,
icon: {
path: "M0 0 L0 25 L 25 0 L 0 0",
fillColor: '#CC0000',
fillOpacity: .8,
anchor: new google.maps.Point(0, 0),
strokeWeight: 1.5,
scale: 1.3,
rotation: 45 + head,
}
});
markers.push(marker);
}
function setMapOnAll(map) {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(map);
}
}
initMap();
您每秒发出太多HTTP请求。我认为您应该考虑改用WebSocket。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.