setTimeout/setInterval 的 Javascript 循环问题

发布于 10-19 08:07 字数 840 浏览 7 评论 0原文

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>

原文

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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

落墨2024-10-26 08:07:43

尝试一下：

<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) 在此函数中，您可以设置和禁用间隔。

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

丶情人眼里出诗心の2024-10-26 08:07:43

也许是这样的：

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

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

﹉夏雨初晴づ2024-10-26 08:07:43

您可以使用（非标准）watch（支持在 Firefox 中）或此跨浏览器版本（支持所有最新的浏览器）来监视标志的更改，相反：

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

传递给 watch 的函数将在每次 flag.value 更改时执行，因此无需使用以下命令监视它：超时。（当然，如果 30 秒的等待是硬性要求，那么您将返回 setTimeout，或者您需要跟踪自标志上次更改以来所经过的时间。）

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

独享拥抱2024-10-26 08:07:43

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

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

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

~没有更多了~