Question

我有一个覆盆子pi，在90秒延迟后启动车库门关闭事件。我已经成功地在网页上显示倒数计时器动态更新，但由于某种原因，倒计时不稳定，并且数字越来越频繁地闪烁。

显然，我必须要提神，但不用说我在论坛上花了很多时间，但无济于事。我希望有人可以查看我的代码并给我一些指导。

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

我还应该提到上面的代码段在一个名为timing.php的文件中。这在index.php上调用如下：

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

总而言之，我想要的是“自动隐身的时间......”如果（$ pinInput！= $ pinOutput）保持静态，但动态显示90秒的倒计时。

Answer 1

首先让我们看看这段代码，问题的最后一点：

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

设置间隔计时器，该计时器每秒将“timing.php”URL加载到页面中一次。

现在，这是你说的“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.
    }
}());

因此，当浏览器收到“timer.php”的响应时，jQuery将运行该代码。这设置了一个重复计时器功能 - 基本上与间隔计时器相同，只是它会在一段时间后自动停止。）

现在，当重新加载该代码时，您不获取新的全局变量timer和el。已经由“timer.php”的最后一次加载定义的全局变量将仅覆盖其值。这意味着已经在进行中的上一个超时序列会突然看到timer设置回90。

目前尚不清楚你打算做什么。也许setInterval()只是多余的，你需要做的只是加载“timeout.php”一次。或者，也许当“timeout.php”代码加载时，它首先需要消除任何已经运行的超时循环，尽管这看起来很奇怪，因为它们设置为仅在90秒后关闭。

Javascript倒数计时器不稳定

1 个答案: