中断功能

Question

We're using the gauge Google Chart applet to visually monitor some message transfer failure rates on a SOAP interface we have via AJAX.

My desire is to have the background of the page flash red and white when the fail rate is at 50% or higher, and just have a plain white background when not. We're monitoring two SOAP interfaces with two separate gauges, so they can't step on each other when turning the flashing on or off. To that end, I can get it to turn on but not turn off, and every 5 seconds (the interval of the AJAX refresh) that the dial is over 50, it will re-call the flashing loop which will eventually run the flashing interval up so high that the page looks like a strobe light.

I'll admit this- I'm terrible at javascript.

Here's what I have so far:

For the flashing itself:

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;
}

And the gauges:

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

You can cancel an interval by clearing it, but you will need to keep a reference to the ID which you can do in a simple variable: Example, see intervalChangeColors var being used in your changeColors function

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

Referance: http://www.w3schools.com/jsref/met_win_clearinterval.asp

some simple code improvements:

change

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

to:

changeColors(response > 49)

And

if (on === "on")

to

if (on)

Booleans are nice :)