setInterval does not work properly

Asked

Viewed 429 times

1

I would like to perform a function infinitely every second, I am trying this way but the function is only executed once:

Between the tag body

    <div id="map"><div id="seg"></div></div>
    <?php
    date_default_timezone_set('America/Sao_Paulo');
    $Sh = date('G');
    $sM = date('i');
    $sS = date('s');
    $rS = ($Sh*60*60)+($sM*60)+$sS;
    ?>

Enter the script tag 

    var myVar = setInterval(function(){ mudarHora() }, 1000);
    var tServ = <?php echo $rS; ?> + 3;
    function mudarHora() {
    var dt = new Date();
    var secs = dt.getSeconds() + (60 * (dt.getMinutes() + (60 * dt.getHours())));
    var difT = tServ - secs;
    var segundosAgora = secs + difT;
    document.getElementById("seg").innerHTML = segundosAgora;
    }

As I said the function is executed only once and I do not know where the error is.

php javascript html

  • The function is correct. The error is in the calculation. The variable segundosAgora at all times will have the same value.

  • @valdeirpsr when I refresh the page manually the value of secondsNow changes, why says it will always have the same value?

  • If you add a console.log( segundosAgora ); within the function mudarHora, you will see (F12) that the value will always be the same, despite the function is working. Demonstration: https://codepen.io/valdeir2000/pen/rJpvdr

  • @valdeirpsr in codepen is not possible to work with php (think) and you set const tServ = 65438; where 65438 is actually a dynamic number (current second of the day - server side). Since the value of tServ is fixed in your example, this is why the latter is always the same now, no?

  • @talnum he’s talking about his calculation of segundosAgora, that makes no sense. tServ - secs + secs = tServ, at all times.

  • 1

    @talnun This value is fixed. O PHP does not work with client-side dynamic values (except when refreshing the page). As long as you keep the page open, the value does not change. For the variable value tServ be changed (without refresh), you should do this with Javascript.

  • 2

    @Valdeirpsr the intention was this, I think: https://codepen.io/anon/XZVqPx?editors=1111

  • It was easier to say what is the desired result. setInterval is working normally.

Show 3 more comments

1 answer

1


Edited

So the difficulty is to restart the function by TIMER in javascript? If you try to use setTimeout:

var tServ = <?php echo $rS; ?> + 3;
function mudarHora() {
   var dt = new Date();
   var secs = dt.getSeconds() + (60 * (dt.getMinutes() + (60 * dt.getHours())));
   var difT = tServ - secs;
   var segundosAgora = secs + difT;
   document.getElementById("seg").innerHTML = segundosAgora;
   setTimeout(function(){ mudarHora() }, 1000);
}

To trigger the function use the event onload thus:

<body onload="mudarHora()">

This will be the complete code:

<?php
date_default_timezone_set('America/Sao_Paulo');
$Sh = date('G');
$sM = date('i');
$sS = date('s');
$rS = ($Sh*60*60)+($sM*60)+$sS;
?>
<!DOCTYPE html>
<html>
<head>
<script>
var tServ = <?php echo $rS; ?> + 3;
function mudarHora() {
   var dt = new Date();
   var secs = dt.getSeconds() + (60 * (dt.getMinutes() + (60 * dt.getHours())));
   var difT = tServ - secs;
   var segundosAgora = secs + difT;
   document.getElementById("seg").innerHTML = segundosAgora;
   setTimeout(function(){ mudarHora() }, 1000);
}
</script>
</head>
<body onload="mudarHora()">
<div id="map"><div id="seg"></div></div>
</body>
</html>

  • actually no, get the server time I already got in this answer https://answall.com/a/256698/90997. The suggestion you offered me is very likely to overload my shared server as it already happened, because it makes many requests to the Realtime.php file depending on the number of accesses at the same time, but thank you.

  • Modified, see if the problem was this, I tested and worked.

  • 1

    @talnun and Rpgboss Probably the error is not in setInterval vs setTimeout but some script or other script error, probably looking at the console will notice issues and will know the origin of the problem. Probably the DOM is not loaded at the moment the script starts, so onload can solve as Rpgboss suggested, still I believe that something faster and more efficient than onload is to use DOMContentLoaded, or better still something like this: https://answall.com/a/137881/3635

  • Now that I realize she called PHP after all I understand. I’ll post the full example...

  • worked right

Browser other questions tagged php javascript html

You are not signed in. Login or sign up in order to post.