Javascript Countdown-Timer ist unberechenbar

Question

Ich habe eine Himbeer-Pi, die ein Garagentor nahe Ereignis nach einer Verzögerung von 90s initiiert. Es ist mir gelungen, den Countdown-Timer auf einer Webseite dynamisch zu aktualisieren, aber aus irgendeinem Grund ist der Countdown unberechenbar und flackert ständig mit niedrigeren und dann höheren Zahlen.

Klar muss ich etwas erneuern, aber unnötig zu sagen, dass ich viele Stunden in Foren verbracht habe, aber ohne Erfolg. Ich hoffe, dass jemand meinen Code sehen und mir eine Richtung geben kann.

---

<?php 
$pinInput = trim(shell_exec("gpio read 26")); 
$pinOutput = trim(shell_exec("gpio read 2")); 

if ($pinInput!=$pinOutput){ 

echo "Timing for auto reclose..."; 

?> 

<br> 

<b><span id="countdown">90</span> Seconds</b> 

<script type="text/javascript"> 

var timer = 90, 
    el = document.getElementById('countdown'); 

(function t_minus() { 
    'use strict'; 
    el.innerHTML = timer--; 
    if (timer >= 0) { 
     setTimeout(function() { 
      t_minus(); 
     }, 1000); 
    } else { 
     // do stuff, countdown has finished. 
    } 
}()); 

</script> 

<?php 

} 

elseif ($pinInput=1) 
{ 
echo "Monitoring input..."; 
} 
else 
{ 
echo "Garage door is closing..."; 
} 
?> 

sollte ich auch erwähnt, dass das obige Stück Code in einer Datei timing.php genannt wird. Dies wird auf index.php wie folgt aufgerufen:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script> 
<script type="text/javascript"> 
    var auto_refresh = setInterval(
    function() 
    { 
    $('#Input').load('timing.php'); 
    }, 1000); // refresh every 1000 milliseconds 
</script> 

Also zusammenfassend, was würde ich ist wie für „Timing für Auto Einsiedlerin ...“ statisch bleiben if ($ pinInput = $ pinOutput!), Aber dynamisch zeigte den Countdown aus den 90er Jahren.

Answer 1

Zunächst ist an diesem Code aussehen lassen, das letzte Bit in Ihrer Frage:

var auto_refresh = setInterval(
    function() { 
     $('#Input').load('timing.php'); 
    }, 1000); // refresh every 1000 milliseconds 

, dass bis setzt einen Intervall Timer, der die „timing.php“ URL in der Seite einmal pro Sekunde wird geladen. Jetzt

, hier ist ein Teil von dem, was Sie sagen, wird von „timing.php“ zurückgegeben:

var timer = 90, 
el = document.getElementById('countdown'); 

(function t_minus() { 
    'use strict'; 
    el.innerHTML = timer--; 
    if (timer >= 0) { 
     setTimeout(function() { 
      t_minus(); 
     }, 1000); 
    } else { 
     // do stuff, countdown has finished. 
    } 
}()); 

Also, wenn der Browser die Antwort von „timer.php“ empfängt, wird jQuery diesen Code ausführen. Das setzt eine sich wiederholende Timer-Funktion — im Wesentlichen die gleiche Sache wie ein Intervall-Timer, außer dass es sich selbst nach einer Weile stoppt).

Nun, wenn dieser Code neu geladen wird, Sie neue globale Variablen nicht erhalten tun timer und el. Die globalen Variablen, die bereits beim letzten Laden von "timer.php" definiert wurden, werden einfach überschrieben. Das bedeutet, dass die bereits in Bearbeitung befindliche vorherige Timeout-Sequenz plötzlich timer zurückgesetzt auf 90 erscheint.

Es ist nicht klar, was genau Sie beabsichtigen zu tun. Vielleicht ist das setInterval() nur überflüssig, und alles, was Sie tun müssen, ist nur einmal laden "timeout.php". Oder, vielleicht, wenn der "timeout.php" -Code geladen wird, muss er zuerst alle bereits laufenden Timeout-Schleifen löschen, obwohl das seltsam erscheint, da diese so eingestellt sind, dass sie erst nach 90 Sekunden heruntergefahren werden.