Javascript loop-problem avec setTimeout / setInterval

var flag = 0/1 (default=1) 
  • Je veux que ce drapeau soit vérifié tous les 30 ss encore et toujours jusqu'à ce que le drapeau soit 0 (par un événement externe que je ne peux pas contrôler).
  • Lorsque le drapeau est 0, le contrôle 30 secondes devrait se terminer jusqu'à ce que le drapeau soit encore 1
  • Tant que le drapeau est 0, un texte devrait clignoter sur l'écran, si le drapeau remonte à 1, le clignotement devrait s'arrêter et la vérification de 30 secondes devrait se poursuivre.

J'ai essayé de le faire avec setTimeout / setInterval mais j'ai du mal à les combiner avec des boucles.

Voici un code qui clignote depuis un autre 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> 

Essaye ça:

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

Si vous modifiez la valeur du flag par des fonctions externes, vous devez quitter l'intervalle pour vérifier s'il a changé ou non. Vous pouvez changer cet intervalle à 5 secondes pour l'ex. Afin de détecter plus rapidement les changements.

L'autre façon est de changer le flag non directement mais par la fonction setter pour ex. setFlag(1) et à l'intérieur de cette fonction, vous pouvez définir et désactiver l'intervalle.

Peut-être quelque chose comme ça:

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

Vous pouvez utiliser la montre (non standard) (prise en charge dans Firefox) ou cette version de navigateur (prise en charge dans tous les navigateurs récents) pour surveiller les modifications apportées à votre drapeau:

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

La fonction passée à watch sera exécutée chaque fois que le flag.value , donc il n'est pas nécessaire de la surveiller avec les délais. (Bien sûr, si l'attente de 30 secondes est une exigence difficile, alors vous revenez à setTimeout ou vous devriez suivre le temps écoulé depuis que le drapeau a changé pour la dernière fois.)

Merci pour vos réponses, je les essayerai. C'est mon propre essai qui semble fonctionner correctement:

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