Question

var flag = 0/1 (default=1)

我希望这个标志每隔30秒反复检查一次，直到标志变为0（由我无法控制的外部事件）。
当标志为0时，30秒检查应该结束，直到标志再次为1
只要标志为0，屏幕上的某些文字就会闪烁，如果标志返回1，则应停止闪烁并继续30秒检查。

我尝试使用setTimeout / setInterval执行此操作，但我在将它们与循环组合时遇到问题。

这是从另一个网站眨眼的一些代码：

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

Answer 1

也许是这样的：

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

Answer 2

试试这个：

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

如果您通过外部函数更改flag值，则需要保留检查其是否已更改的时间间隔。您可以将此间隔更改为5秒。所以它会更快地检测到变化。

其他方式是不直接更改flag，而是通过setter函数更改。 setFlag(1)在此功能中，您可以设置和禁用间隔。

Answer 3

您可以使用（非标准）watch（在Firefox中支持）或此cross-browser version（在所有最近的浏览器中都支持）来监控对您的标志的更改，而不是：

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

每次watch更改时，都会执行传递给flag.value的函数，因此无需通过超时监视它。（当然，如果30秒的等待是一项艰难的要求，那么您将回到setTimeout，或者您需要跟踪自上次更改标志以来经过的时间。）

Answer 4

感谢您的回答，我会尝试一下。这是我自己的尝试似乎工作正常：

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

使用setTimeout / setInterval的Javascript循环问题

4 个答案: