中断功能

我们使用gauge Google Chart小程序来通过AJAX可视化监控SOAP接口上的一些消息传输失败率。

我的愿望是，当失败率达到50%或更高时，页面的背景会闪烁红色和白色，而当失败率不高时，则只有纯白色背景。我们正在用两个独立的仪表监控两个SOAP接口，所以它们在打开或关闭闪烁时不能相互踩在一起。为此，我可以让它打开但不能关闭，并且每5秒（AJAX刷新的间隔）拨号超过50，它将重新调用闪烁循环，该循环最终会将闪烁间隔提高到如此之高，以至于页面看起来像闪光灯。

我承认这一点——我在javascript方面很糟糕。

到目前为止，我拥有的是：

对于闪烁本身：

function changecolors(on) {
  x = 1;
  if (on === "on") {
    setInterval(change, 500);
  } else {
    x = 2;
    document.body.style.background = "white";
  }
}
function change() {
  if (x === 1) {
    color = "red";
    x = 2;
  } else {
    color = "white";
    x = 1;
  }
  document.body.style.background = color;
}

仪表：

function drawFAIL1() {
  var data = google.visualization.arrayToDataTable([
    ['Label', 'Value'],
    ['Percent', 0]
  ]);
  var options = {
    width: 600,
    height: 320,
    redFrom: 50,
    redTo: 100,
    yellowFrom: 25,
    yellowTo: 50,
    minorTicks: 5,
    max: 100
  };
  var chart = new google.visualization.Gauge(document.getElementById('fail1'));
  chart.draw(data, options);
  function getData() {
    $.ajax({
      url: 'fail1.php',
      success: function(response) {
        data.setValue(0, 1, response);
        chart.draw(data, options);
        setTimeout(getData, 5000);
        if (response > 49) {
          changecolors("on");
        } else {
          changecolors("off");
        }
      }
    });
  }
  getData();
}
function drawFAIL2() {
  var data = google.visualization.arrayToDataTable([
    ['Label', 'Value'],
    ['Percent', 0]
  ]);
  var options = {
    width: 600,
    height: 320,
    redFrom: 50,
    redTo: 100,
    yellowFrom: 25,
    yellowTo: 50,
    minorTicks: 5,
    max: 100
  };
  var chart = new google.visualization.Gauge(document.getElementById('fail2'));
  chart.draw(data, options);
  function getData() {
    $.ajax({
      url: 'fail2.php',
      success: function(response) {
        data.setValue(0, 1, response);
        chart.draw(data, options);
        setTimeout(getData, 5000);
        if (response > 49) {
          changecolors("on");
        } else {
          changecolors("off");
        }
      }
    });
  }
  getData();
}