中断功能

Question

我们正在使用仪表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();
}

Answer 1

您可以通过清除来取消间隔，但是您需要保留对可在简单变量中执行的ID的引用： 例如，请参阅changeColors函数中使用的intervalChangeColors var

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

全球化志愿服务青年： http://www.w3schools.com/jsref/met_win_clearinterval.asp

一些简单的代码改进：

变化

if (response > 49) {
          changecolors("on");
        } else {
          changecolors("off");
        }

为：

changeColors(response > 49)

和

if (on === "on")

到

if (on)

布尔非常好:)。