Javascript loop-problem with setTimeout/setInterval

Question

var flag = 0/1 (default=1)

I want this flag to checked every 30sec over and over until the flag becomes 0 (by an external event that I cant control).
When the flag is 0 the 30sec-check should end until the flag is 1 again
As long as the flag is 0 some text should blink on the screen, if the flag goes back to 1 the blinking should stop and the 30sec check should continue.

I tried to do this with setTimeout/setInterval but Im having problem combining them with loops.

Here is some code doing the blinking from another site:

<html>
 <head>
 <script type="text/javascript">
  function init() {
    window.setInterval(blink,1000);
  }

  function blink() {
    var elm = document.getElementById('blinkDiv');
    if (elm.style.color == "#ff0000")
      elm.style.color = "#ffffff";
    else
      elm.style.color = "#ff0000";
  }
</script>
</head>
<body onload="init();" style="background-color: #ffffff;">
<div id="blinkDiv" style="color: #ff0000;">some text</div>
 </body>
</html>

Karl Johan · Answer 1 · 2011-02-28T13:28:27.070

Maybe something like this:

function init() {
  //start timeout to see if flag has changed in 30 seconds
  window.setTimeout(checkState,30000);
}

var blinkIntervalID;

function checkState() {
  if(flag==0) {
    // if flag is 0 then start the blinking interval
    blinkIntervalID = window.setInterval(blink,1000);
  }
  else {
    //else clear the blinking interval and set the text to normal state
    window.clearInterval(blinkIntervalID);
    stopBlink()
  }
  // Start timeout again to check in 30 seconds if flag has changed
  window.setTimeout(checkState,30000);
}

function blink() {
  var elm = document.getElementById('blinkDiv');
  if (elm.style.color == "#ff0000") {       
    elm.style.color = "#ffffff";
  }
  else {
    elm.style.color = "#ff0000";
  } 
}

function stopBlink(){
    var elm = document.getElementById('blinkDiv');
    elm.style.color = "#ffffff";
}

score 1 · Answer 2 · answered Feb 28 '11 at 13:23

Try this:

<script type="text/javascript">
    var checkIntervalId = null;
    var blinkIntervalId = null;
    var flag = 1;
    var elm = document.getElementById('blinkDiv');
    function init() {
        checkIntervalId = window.setInterval(check,30000);
    }
    function check() {
        clearInterval(blinkIntervalId);
        if (flag==0) {
            blinkIntervalId = window.setInterval(blink,1000);
        }
    }
    function blink() {
        if (elm.style.color == "#ff0000")
            elm.style.color = "#ffffff";
        else
            elm.style.color = "#ff0000";
    }
</script>

If you change the flag value by external functions, you need to leave the interval for checking if its changed or not. You can change this interval to 5 sec for ex. so it will faster detect change.

Other way is to change flag not directly but by setter function for ex. setFlag(1) and inside this function you can set and disable interval.

score 1 · Answer 3 · edited May 23 '17 at 12:04

You could use (the non-standard) watch (supported in Firefox) or this cross-browser version (supported in all recent browsers) to monitor changes to your flag, instead:

var flag = {value: 1};
flag.watch("value", function(id, oldval, newval) {
    if (newval === 0)
        blink();
    else 
        stopBlink();
});

The function passed to watch will be executed every time flag.value changes, so there's no need to monitor it with timeouts. (Of course, if the 30 second wait is a hard requirement, then you're back to setTimeout or you'd need to track the elapsed time since the flag last changed.)

mdc · Accepted Answer · 2011-02-28T14:30:42.600

0

Thanks for your answers I will try them. This is my own try that seems to work OK:

    <script type="text/javascript">

        function controller(){
            if(!f)
                setTimeout("blink();", 1000);
            else if(f)
                setTimeout("controller();", 30000);
        }

        function blink(){
            var elm = document.getElementById('alert');
            if (elm.style.color == "#ff0000")
              elm.style.color = "#ffffff";
            else
              elm.style.color = "#ff0000";

            controller();
        }

    </script>

edited Feb 28 '11 at 14:30

answered Feb 28 '11 at 14:05

mdc

1,161
6
22
37

Don't pass a string to `setTimeout` - you are implicitly calling `eval` with that. Instead, you cann pass it a reference to the function you want to call, like `setTimeout(blink)` and `setTimeout(controller)` – Yi Jiang Mar 01 '11 at 11:11

Javascript loop-problem with setTimeout/setInterval

4 Answers4

Linked