Best Way to detect midnight and reset data

Question

I've been developing a web application Dashboard and I was wondering how to detect that is midnight in order to reset some arrays that contains datas from the previous day using jquery or momentjs.

Answer 1

Use moment().format("h:mm:ss") that returns time in a h:mm:ss format.

var midnight = "0:00:00";
var now = null;

setInterval(function () {
    now = moment().format("H:mm:ss");
    if (now === midnight) {
        alert("Hi");
    }
    $("#time").text(now);
}, 1000);

JSFIDDLE

A better way would be to compute the seconds until midnight. This is very simple and human readable using MomentJS:

// returns the number of seconds until next midnight
moment("24:00:00", "hh:mm:ss").diff(moment(), 'seconds');

So, just do:

setTimeout(
   midnightTask,
   moment("24:00:00", "hh:mm:ss").diff(moment(), 'seconds')
);

function midnightTask() {
  /* do something */
}

JSFIDDLE

Answer 2

There's only really two ways to accomplish this

1. poll every x seconds and see whether we're within x seconds of midnight
2. Calculate the time between now and midnight, and sleep for that amount of time before executing

(1) has been demonstrated in other answers, here's (2).

The first thing to do is calculate the number of milliseconds until midnight then use that as a parameter to javascripts setTimeout.

setTimeout(function(){
  // whatever you want to do at midnight
}, msToMidnight);

After you've finished your work in that function, you might want to recaculate the time until next midnight and repeat the process.

Answer 3

So I think you're going about this the wrong way. What you're looking for isn't when it's midnight, you just want to know when the day has changed, which is a much simpler task.

The first thing I'm going to say is avoid using timers at all costs. They're not worth it. The performance hit and extra CPU time you take from running the same function >3600 times a day is ridiculous, especially when it's running on someone else's computer. You don't know how much it can handle, so assume it can't handle much at all. Go easy on your users.

I would suggest listening to a user input event, assuming that this is something you would have on a regular computer, and not something like this, where there is no user input.

If user input events are something you could rely on, I would do this..

var today = new Date(), lastUpdate;

window.addEventListener( "mousemove", function () {
  var time = new Date();
  // If we haven't checked yet, or if it's been more than 30 seconds since the last check
  if ( !lastUpdate || ( time.getTime() - lastUpdate.getTime() ) > 30000 ) {
    // Set the last time we checked, and then check if the date has changed.
    lastUpdate = time
    if ( time.getDate() !== today.getDate() ) {
      // If the date has changed, set the date to the new date, and refresh stuff.
      today = time

      this_is_where_you_would_reset_stuff()
    }
  }
} )

If you absolutely need to use a timer, then I would do this..

function init() {
  var today = new Date();
  var midnight = new Date();

  midnight.setDate( today.getDate() + 1 )
  midnight.setHours( 0 )
  midnight.setMinutes( 0 )

  setTimeout( function () {
    // If the date has changed, set the date to the new date, and refresh stuff.
    today = time

    this_is_where_you_would_reset_stuff()

    init()
  }, midnight.getTime() - today.getTime() )
}

init()

Keep in mind that the second way is likely to be far less reliable.