Javascript countdown timer is erratic

Question

I have a raspberry pi that initiates a garage door close event after a 90s delay. I have been successful in showing the countdown timer dynamically update on a web page but for some reason the countdown is erratic and constantly flickers with lower and then higher numbers.

Clearly I must be refreshing something but needless to say I have spent many hours on forums but to no avail. I am hoping that someone can look at my code and give me some direction.

---

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

I should also mentioned that the above piece of code is within a file called timing.php. This is called on index.php as follows:

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

So in summary, what I would like is for "Timing for auto recluse..." to remain static if ($pinInput!=$pinOutput) but dynamically shown the countdown from 90s.

Answer 1

First let's look at this code, the last bit in your question:

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

That sets up an interval timer that will load the "timing.php" URL into the page once per second.

Now, here's part of what you say is returned from "timing.php":

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.
    }
}());

So when the browser receives the response from "timer.php", jQuery will run that code. That sets up a repeating timer function — essentially the same thing as an interval timer, except that it stops itself after a while).

Now, when that code is reloaded, you don't get new global variables timer and el. The global variables already defined by the last load of "timer.php" will simply have their values overridden. That means that the already-in-process previous timeout sequence will suddenly see timer set back to 90.

It's not clear exactly what it is you intend to do. Perhaps that setInterval() is just superfluous, and all you need to do is just load "timeout.php" once. Or, perhaps when the "timeout.php" code loads, it first needs to wipe out any already-running timeout loops, though that seems odd since those are set up to wind down only after 90 seconds.