Javascript loop-problem with setTimeout/setInterva

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>

标签： javascript loops settimeout setinterval

4条回答

兄弟一词,经得起流年.

2楼-- · 2019-06-04 14:17

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

0人赞添加讨论(0) 举报

SAY GOODBYE

3楼-- · 2019-06-04 14:17

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

0人赞添加讨论(0) 举报

看我几分像从前

4楼-- · 2019-06-04 14:18

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>

0人赞添加讨论(0) 举报

成全新的幸福

5楼-- · 2019-06-04 14:40

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.

0人赞添加讨论(0) 举报

Javascript loop-problem with setTimeout/setInterva

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间