Javascript 中断功能

我们正在使用gauge Google Chart小程序直观地监控通过AJAX提供的SOAP界面上的一些消息传输失败率

我的愿望是，当失败率达到50%或更高时，页面背景呈红色和白色闪烁，当失败率达到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();
}

---

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

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

参考：

一些简单的代码改进：

改变

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

致：

及

到

---

布尔语很好：

Java和Javascript是完全不同的语言。对不起，我说的是Java吗？我可以发誓我一直把它作为javascript保存。不管怎样，你可能想问如何停止间隔，因为这是你的问题，但如果你知道你自己可能在谷歌上找到它。通过昨天的谷歌搜索，我确实知道clearInterval，但它似乎失败了，因为变量不是每次调用函数时都保持不变的。例如，fail 1变为50，5秒后，它在52再次调用该函数；现在IntervalChangeColor被重新分配到新的间隔。5秒后，该值下降到45，因此调用clearInterval，但只有一个IntervalChangeColor是持久的，因此警报保持打开。哦，对不起，我没有注意到这一点，当您有一个变量，您将setINterval指定两次时，它将只包含最后一个引用，另一个将浮动在某个位置，所以你能做的就是这样。清晰易变；变量=setIntervalfunc，50；这样你就可以确定你不会有重复的。你已经修好了吗？

changeColors(response > 49)

if (on === "on")

if (on)