Performance of recursive function of time

Question

I have a function startTime() that handles a clock showed on the page, and the last line of this function is var t = setTimeout(function(){ startTime() }, 1000);.

Being a recursive function with a timeout, what are the implications in performance? Does it consumes more and more memory as time passes by? I mean, if I leave this page opened during one day, and compare it to being open for a week, what are the difference? If this approach is not so good, is there a better one to this? Also, feel free to give some tips to my code (standards and better typing).

Thanks!

Complete code:

function startTime() {
    var today = new Date();
    var h = today.getHours();
    var m = today.getMinutes();
    var s = today.getSeconds();

    // function checkTime(): add a zero in front of numbers<10
    h = checkTime(h);
    m = checkTime(m);
    s = checkTime(s);
    var t_hora = h + ":" + m;
    document.getElementById("clock").innerHTML = t_hour + ":" + s;
    if (s%20 <= 10) {
      document.title = t_hour;
    } else {
    document.title = "My customized title";
  }
  var t = setTimeout(function(){ startTime() }, 1000);
}

function checkTime(i) {
  if (i < 10) {
    i = "0" + i;
  }
return i;
}

setTimout is not recursive. You just set up a timer that executes the code again after the times is elapsed unless the timeout is cancelled by your script. Additionally since you are not passing any vars, you can just do `var t = setTimeout(startTime, 1000);` — mplungjan, Jun 26 '19 at 11:29
Also for padding, I use this: `const pad = (num) => ("0"+num).slice(-2);` — mplungjan, Jun 26 '19 at 11:30
I thought it were recursive because of the `function(){ startTime()...` inside the setTimeout, not setTimeout itself, because it calls it again and again, second after second. Let's say I have startTime in t=1, then it calls startTime again, and this new is t=2, and again in t=3; won't it be stored somewhere in case it returns a result (even not doing so since there is no return)? — Kelvin, Jun 26 '19 at 11:35
"Recursive" specifically means that the call stack grows, that your recursive call *returns* to the call that triggered it. That's not the case here. There's always only one `startTime` on the stack at any one time. — deceze, Jun 26 '19 at 11:38
@mplungjan How do you do this padding? Can you give an example? — Kelvin, Jun 26 '19 at 11:39

score 1 · Answer 1 · answered Jun 26 '19 at 11:38

1

setTimout is not recursive. You just set up a timer that executes the code again after the times is elapsed unless the timeout is cancelled by your script.

I would use interval and a more elegant padding:

const pad = (num) => ("0" + num).slice(-2);

function startTime() {
  var today = new Date();
  var h = pad(today.getHours());
  var m = pad(today.getMinutes());
  var s = pad(today.getSeconds());

  var t_hour = "" + h + ":" + m;
  document.getElementById("clock").innerHTML = t_hour + ":" + s;
  document.title = (s % 20 <= 10) ? t_hour: "My customized title";
}
var t = setInterval(startTime, 1000);

<span id="clock"></span>

answered Jun 26 '19 at 11:38

mplungjan

169,008
28
173
236

Pad is a function, that receives num as param, add a leading 0 in string format, then gets the last two chars; if num = "032" it returns "32", if num = "09" it returns "09". Did I get it right? Another question, why pad has to be a const? – Kelvin Jun 26 '19 at 13:10
Yes that is what it does. I made it a const because it does not change ever – mplungjan Jun 26 '19 at 13:13
https://stackoverflow.com/questions/33040703/proper-use-of-const-for-defining-functions-in-javascript – mplungjan Jun 26 '19 at 13:14

Performance of recursive function of time

1 Answers1