CODEWITHSUNDEEP
javascriptloopssettimeoutsetinterval
mdc
mdc

Reputation: 1201

Javascript loop-problem with setTimeout/setInterval

var flag = 0/1 (default=1)

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>

Upvotes: 1

Views: 3903

Answers (4)

Wayne
Wayne

Reputation: 60414

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.)

Upvotes: 1

mdc
mdc

Reputation: 1201

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>

Upvotes: 0

Karl Johan
Karl Johan

Reputation: 4022

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

Upvotes: 1

Adam Lukaszczyk
Adam Lukaszczyk

Reputation: 4926

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.

Upvotes: 1

Related Questions