如何在特定时间调用 JavaScript 函数

Question

我有大约 10 个<div>，在每个<div>都有一个不同的日期时间。当客户端本地时间与该<div>的时间匹配时，我想调用一个 java 脚本函数。

<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>

如果客户端计算机的当前日期时间与<div>中的日期时间匹配;调用函数说callMe()

现在我只有——一些PHP代码：
echo "<script type='text/javascript'>putTime(".$questionData['expiry'].",".$needAnswer[$i].")</script>";和 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;
}这就是我所拥有的一切。

Answer 1

它做起来很简单

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);

Answer 2

作为另一种可能性，您还可以在请求动画帧上注册一个函数，该函数将根据当前时间检查每个div 的时间。这样你就不会弄乱超时等。可能不是最好的解决方案，而只是一个想法。

Answer 3

尝试使用 JavaScript Timing Events 在特定时间间隔内调用函数。

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

另一种选择——

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

祝你好运，亚历克斯

Answer 4

这应该可以完成您要求的所有操作（假设您可以使用 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');
}

编辑：固定代码

您可以通过打开控制台并输入以下内容来确保此操作正常工作：

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

Answer 5

我不知道

你为什么需要它，但这里有一个可能的解决方案：

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);

看起来您的日期格式适合使用 new Date() 进行解析，因此上面的代码在大多数浏览器中应该可以正常工作。