Pemasa JavaScript tidak dikemas kini setiap saat

Question

Ini adalah kod saya untuk memaparkan pemasa undur untuk otp, tetapi ia hanya memaparkan nilai statik dan tidak mengemas kini setiap saat seperti yang dijangkakan.

<?php 
// Set the target end time (in this example, 10 minutes from now) 
$endTime = time() + (10 * 60);  
 
// Calculate the remaining time 
$remainingTime = $endTime - time(); 
 
// Display the remaining time 
echo "<span id='countdown'></span>"; 
 
?> 
 
<script> 
// Display the remaining time in minutes and seconds 
function displayCountdown() { 
  var remainingTime = <?php echo $remainingTime; ?>; 
  var minutes = Math.floor(remainingTime / 60); 
  var seconds = remainingTime - (minutes * 60); 
  document.getElementById("countdown").innerHTML = minutes + "m " + seconds + "s"; 
  remainingTime--; 
  if (remainingTime < 0) { 
    clearInterval(interval); 
    document.getElementById("countdown").innerHTML = "Time's up!"; 
  } 
} 
var interval = setInterval(displayCountdown, 1000); 
</script>

Sila nyatakan apa yang saya hilang.

Answer 1

Ingat, kod PHP dilaksanakan pada pelayan - dan tidak mempunyai kesan pada pelaksanaan JS ("masa pelayar". Fungsi JS anda sebenarnya kelihatan seperti ini:

sssccc

Di sini, masalahnya kelihatan serta-merta: anda hanya menjalankan satu displayCountdown 函数期间递减 remainingTime 。下次调用时，该值再次为 600 - 因为 remainingTime pembolehubah yang setempat.

Jadi penyelesaian yang paling mudah ialah mengalihkan pembolehubah itu di luar julat displayCountdown, seperti ini:

sssccc