how to call a javascript function at a specific time

Question

I have got around 10 <div> 's and in every <div> there is a different datetime. I want to call a java-script function when the clients local time matches the time in that <div> 's.

<div id="a" class ="help">2/3/2013 6:39:14 PM</div>
<div id="b" class ="help">2/3/2013 2:39:14 PM</div>
<div id="c" class ="help">2/4/2013 6:39:14 PM</div>
<div id="d" class ="help">12/29/2013 10:39:14 AM</div>

if the current date-time of the client machine matches the date-time in the <div> ; call a function say callMe()

for now I have got only - some php code :
echo "<script type='text/javascript'>putTime(".$questionData['expiry'].",".$needAnswer[$i].")</script>"; And the javascript :
function putTime(x,y) {
var theDate = new Date(x*1000); // convert time value to milliseconds
var dateString = theDate.toLocaleString();
document.getElementById(y).innerHTML = dateString;
}
This all I have.

Answer 1

As another possibility you could also register a function on request animation frame, which would check the time of each div against the current time. That way you don't mess with timeouts and such. May not be the best solution, but just a thought.

Answer 2

I don't know why you need that, but here is one possible solution:

var dates = [],
    divs = document.querySelectorAll(".help");

for (var i = 0; i < divs.length; i++) {
    dates.push(new Date(divs[i].innerHTML).toString());
}

setInterval(function() {
    for (var i = 0; i < dates.length; i++) {
        if (dates[i] === new Date().toString()) {
            callMe();
            break;
        }
    }
}, 500);

It looks like your date format is suitable for parsing with new Date() , so the code above should work fine in most browsers.

Answer 3

Try using the JavaScript Timing Events to call function within certain time intervals.

setInterval(function(){alert("Test")},5000);

The alternative --

setTimeout() : executes a one-time-only function, postponed by a specific number of mils

Best of luck, Alex

Answer 4

This should do everything you asked for (assuming you can use jQuery):

var timers = [];


$('div.help').each(function() {
    var localeString = $(this).text();
    var date = new Date(localeString);
    var timestamp = date.getTime();
    timers.push({
        time: timestamp,
        div: this,
    });
});


setInterval(function() {
    var now = (new Date()).getTime();
    for(var i=0; i<timers.length; i++) {
        var timer = timers[i]
        if(timer && (now >= timer.time)) {
            callMe();
            timers[i] = false;
        }
    }
}, 500);

function callMe() {
    alert('i was called');
}

EDIT: fixed code

You can make sure this is working by opening a console and entering:

timers.push({
    time: (new Date()).getTime()+1000,
});

Answer 5

its so simple to do

var now = new Date();
var millisTill10 = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 10, 0, 0, 0) -now;

if (millisTill10 < 0) 

{
     millisTill10 += 86400000; // it's after 10am, try 10am tomorrow.

}

setTimeout(function(){alert("It's 10am!")}, millisTill10);