网页在几分钟后变得无响应并崩溃

Question

我的网页在托管在服务器上几分钟后变得无响应、冻结和崩溃，但在本地主机上运行时工作正常。 我正在从 Flask Server(app) 获取 api 数据

api 引擎在 Flask 上工作，每 1 秒以 JSON 形式提取数据。还根据从 api 获得的 Lat Lon 更新谷歌地图标记

我希望网页不会冻结或无响应

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] + " %&nbsp; &nbsp;&nbsp; ";

  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();

Answer 1

您每秒发出的 http 请求太多。我认为您应该考虑改用 WebSocket。