jquery library know when new day is coming

Question

I wonder how can detect or know when new day is coming by using jquery or others jquery library .

For examples:

Assume, right now is 2016/06/23 23:59:50 . And when second come to 2016/06/24 00:00:00 , jquery can detect an event .

I know we can use setTimeOut or setInterval and check every seconds when new day is coming.

But i don't want to use these methods above, what methods of jquery do we detect ?

Answer 1

There's no automatic event that's triggered when the date changes. What you can do is calculate the time until the date changes, and use setTimeout to run a function when that happens.

var now = new Date;
var midnight = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1);
setTimeout(function() {
    alert("It's tomorrow!");
}, midnight.getTime() - now.getTime());

The arguments to new Date() are the components of the date and time. Leaving out the time arguments defaults them all to 0 . So adding 1 to the date and omitting the time will return the time of the next midnight.

Answer 2

You could write a little JavaScript class that continuously samples the time and fires an event when it happens. You listed jQuery, so let's use that to handle the events.

First, let's make the class which samples the time:

function DayChecker() {
    var self = this;
    // Get a copy of now to compare against
    self.lastDate = new Date();
    // A function that compares now to the lastDate, and fires the event
    // if different, and resets the lastDate
    self.sample = function() {
        var tempDate = new Date();
        // Compare the day component of the last sampled time to the
        // current time
        if (self.lastDate.getDay() != tempDate.getDay()) {
            // It changed, so fire the event!
            $(self).triggerHandler('daychange');
        };
        // Update the last sampled date so this can run forever and
        // trigger on every day change
        self.lastDate = tempDate;
    }
    // for illustration, a function that force changes the last date
    // to trigger the event
    self.forceChange = function() {
        // Add 1 day to the last sample time to trip the event
        self.lastDate.setTime(self.lastDate.getTime() + (1 * 86400000));
    };
    // Now start sampling every second (or whatever accuracy you need)
    setInterval(self.sample, 1000);
};

Now we create a new instance of this helper class:

var dayChecker = new DayChecker();

And listen for the event I called "daychange":

$(dayChecker).on('daychange', function() { 
    alert('new day!'); 
});

And finally, run the function that changes the date for testing purposes after a few seconds:

setTimeout(function() {
    // Testing only!
    dayChecker.forceChange();
}, 5000);

You should see the alert after five seconds.

A jsFiddle