JS: UI countown for setTimeout function

Question

I have a page that runs reloadData() function every 5 seconds:

setTimeout('reloadData()', 5000);

I have an element that I'd like to update with a countdown from 5 to 0 for every second of the reloadData();

document.getElementById('countdown').value

What is the proper way to do achieve this effect?

Example:

reloadData() {} starts
Element "countdown" will show: 5... 4... 3... 2... 1... (at second intervals)
reloadData(){} starts again

Andreas Louv · Answer 1 · 2016-05-11T21:33:36.687

3

I'm not completely sure how to interpreter your question, but I guess you have a function reloadData which should run every 5 second.

You will now have a counter showed which will found from 5..1 for each second.

When then counter reaches 0 you want to repeat, eg calling reloadData() and count again?

var counter = 0;
setInterval(function() {
  if (counter == 0) {
    reloadData();
  }
  // do stuff with i which will be 0, 1, 2, 3, 4, 0, 1, 2, 3, 4
  // ...
  document.getElementById('countdown').value = 5 - counter;
  // ...
  counter++;
  counter %= 5;
}, 1000);

edited May 11 '16 at 21:33

answered May 11 '16 at 21:21

Andreas Louv

46,145
13
104
123

bad practice for true second wise ticks – GottZ May 11 '16 at 21:23
`true second wise ticks`? – Andreas Louv May 11 '16 at 21:24
yep. you are implying your code takes 0 ms to run through aswell as this function fires -exactly- one second after calling this settimeout. besides that, you will not run this function more than once since its not repeating (its not an interval.. wich is bad in this case too) – GottZ May 11 '16 at 21:25
@GottZ I ment to use `setInterval`, thanks for the heads up – Andreas Louv May 11 '16 at 21:27
now that you updated it to `setInterval` you might also want to trigger `clearInterval` as soon as the counter reaches 0. and no. its still a bad timer. – GottZ May 11 '16 at 21:27
@GottZ Depends on OP wants the code to run forever which is how i interpreted the question. Correct me if I'm wrong. :-) – Andreas Louv May 11 '16 at 21:28
na. OP is saying he want it to count from 5 to 0. – GottZ May 11 '16 at 21:29
just a small info on why i say setTimeout / setInterval is bad: it will run out of sync. to get around this you need to work with timestamps and calculate offsets wich you use as timeout aswell as register a new timeout as soon as your callback finished. try to create a clock that prints the current time every second into your console. you will notice what i mean. – GottZ May 11 '16 at 21:35
@GottZ I don't think OP needs that amount of precision. `setInterval` will try to run every second even if the code takes 500 ms to execute. While `a=()=> setTimeout(() => { /*cpu intensive stuff ... 500ms later*/ a();}`, 1000)` will not – Andreas Louv May 11 '16 at 21:38
well if you like this kind of precision: http://i.imgur.com/KyeFKs8.png continue using `setInterval`. its actually not a bad choice for OP's question. must be the perfectionist in me. – GottZ May 11 '16 at 21:45

score 0 · Answer 2 · answered May 11 '16 at 21:44

More like 6 seconds because I hang out on reload for a bit, but you can use requestAnimationFrame to call your function (about 60 times a second) and check the date to see if you're over a second. Then update your counter.

As in this example:

https://jsfiddle.net/subterrane/k2aacj4s/

Output div:

<div class="container" id="counter"></div>

Some script:

var counter = document.querySelector("#counter");
var count = 5;
var start = Date.now();

function work() {
  if (count == 0) {
    counter.innerText = "reload!";
  } else {
    counter.innerText = count;
  }

  var now = Date.now();
  if (now >= start + 1000) {
    start = now;
    count--;
    if(count < 0) count = 5;
  }

  window.requestAnimationFrame(work);
};

work();

JS: UI countown for setTimeout function

2 Answers2