Question

I am having trouble dynamically seeing the time update with moment js. It shows the correct time but I have to refresh my browser to get the time update. I would like it to update it in real time. Like momentjs.com main page.

I’ve tried using setInterval and setTimeout but for some reason I get the below digits that don’t even update.

Here’s what I have so far code-wise. Pretty simple as far as moment goes and all I want is seconds to keep counting…

update = ->
  time = moment().format('hh:mm:ss a')

clock = setInterval update, 1000
console.log(clock) //output: 53296

Any ideas are immensely appreciated.

Answer 1

You should put the output inside of the update method and everthing will work as expected.
The method setInterval won’t return the result of the repeatedly called method but an identifier which can be used with clearInterval to stop the execution.

Just a small working example to print the time every seconds and stop after 10 seconds:

update = ->
    console.log(moment().format('hh:mm:ss a'))
x = setInterval update, 1000;
setTimeout (-> clearInterval(x)), 10000

If you want to use that time as content of some DOM-Element you can use the following code inside your update function (assuming you have an element (e.g. div) with id “time”):

JQuery:

$("#time").text(moment().format('hh:mm:ss a')) 

Plain JS:

document.getElementById("time").firstChild.data = moment().format('hh:mm:ss a')