Проблема цикла Javascript с помощью setTimeout / setInterval - PullRequest
Новая
       17

Проблема цикла Javascript с помощью setTimeout / setInterval

1 голос
/ 28 февраля 2011 
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>

Ответы [ 4 ]

1 голос
/ 28 февраля 2011

Вы можете использовать (нестандартный) watch (поддерживается в Firefox) или эту кросс-браузерную версию (поддерживается во всех последних браузерах) для отслеживания изменений вашего флага, вместо: 

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

Функция, переданная в watch, будет выполняться каждый раз, когда изменяется flag.value, поэтому нет необходимости отслеживать ее по таймаутам. (Конечно, если 30-секундное ожидание является жестким требованием, вы вернетесь к setTimeout или вам нужно будет отслеживать истекшее время с момента последнего изменения флага.)

1 голос
/ 28 февраля 2011

Попробуйте это: 

<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 не напрямую, а с помощью функции установки для напр. setFlag(1) и внутри этой функции вы можете установить и отключить интервал.

1 голос
/ 28 февраля 2011

Может быть, что-то вроде этого: 

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 голосов
/ 28 февраля 2011

Спасибо за ваши ответы, я попробую их. Это моя собственная попытка, которая, кажется, работает хорошо: 

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