자바 스크립트 카운트 다운 타이머가 비정상입니다

Question

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

먼저의이 코드를 살펴 보자, 질문의 마지막 비트 :

초에 한 번씩 페이지에 "timing.php"URL을로드 할 것 간격 타이머를 설정

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

. 브라우저가 "timer.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. 
    } 
}()); 

그래서, jQuery를 그 코드를 실행합니다 :

지금, 여기 당신이 "timing.php"에서 반환되는 말의 부분입니다. 그것은 반복 타이머 기능을 설정합니다. —은 인터벌 타이머와 본질적으로 동일하지만, 잠시 후 스스로 멈 춥니 다.)

이제 코드를 다시로드하면 은이 아니며 timer 및 el이 표시되지 않습니다. "timer.php"의 마지막로드로 이미 정의 된 전역 변수는 단순히 값을 무시합니다. 즉, 이미 진행중인 이전의 시간 초과 시퀀스는 timer이 갑자기 90으로 설정됨을 의미합니다.

정확하게하려는 의도가 명확하지 않습니다. 아마도 setInterval()은 불필요한 것이므로 "timeout.php"를 한 번로드하면됩니다. 또는, 아마도 "timeout.php"코드가로드 될 때, 이미 실행중인 타임 아웃 루프를 제거해야합니다. 90 초 후에 만 ​​종료되기 때문에 이상하게 보입니다.