JavaScript-在活动的指定时间前30分钟关闭活动预定

setInterval 除非您的服务器上有一个推送实时更新的消息传递框架，否则，这是必经之路。

LIVE DEMO

注意：以下代码是该演示的摘录。

window.setInterval(function () {
    $(events).each(function (index, event) {
        var currentTime = new Date().getTime();
        var expirationTime = event.time.addMinutes(-30).getTime();
        event.expired = expirationTime - currentTime <= 0;
    });
    createEvents(events); // Destroy and recreate view.
}, updateFrequency);

演示中的代码：

// ----------------------------------------------------------
// Utility and prototype functions.
// ----------------------------------------------------------

// Date prototype methods.
Date.prototype.formatTime = function () {
    var hours = this.getHours();
    var minutes = this.getMinutes();
    var period = hours > 11 ? 'PM' : 'AM';

    if (hours > 12) {
        hours -= 12;
    }
    if (hours < 10) {
        hours = '0' + hours;
    }
    if (minutes < 10) {
        minutes = '0' + minutes;
    }

    return hours + ':' + minutes + ' ' + period;
};

Date.prototype.addMinutes = function (min) {
    var clone = new Date(this.getTime());
    return new Date(clone.getTime() + min * 60000);
};

// Utilities functions to generate times for current day.
var getHourMinSecMsOfDay = function(hour, min, sec, ms) {
    var now = new Date();
    now.setHours(hour, min, sec, ms);
    return now;
};

var getStartOfDay = function() {
    return getHourMinSecMsOfDay(0, 0, 0, 0);
};

var getHourOfDay = function(hour) {
    return getHourMinSecMsOfDay(hour, 0, 0, 0);
};

var getHourMinOfDay = function(hour, min) {
    return getHourMinSecMsOfDay(hour, min, 0, 0);
};

// ----------------------------------------------------------
// Aplication variable and function declarations.
// ----------------------------------------------------------

// Data
var events = [{
    'name': 'Hockey',
    'time': getHourMinOfDay(9, 30),
    'expired': false
}, {
    'name': 'Baseball',
    'time': getHourMinOfDay(11, 59),
    'expired': false
}, {
    'name': 'Football',
    'time': getHourOfDay(17),
    'expired': false
}, {
    'name': 'Basketball',
    'time': getHourMinOfDay(20, 25),
    'expired': false
}];

var updateFrequency = 3000; // Every 3 seconds

// Displays an event.
var displayEvent = function(event) {
    var date = event.time.formatTime();
    var wrapper = $('<div>').addClass('event');
    $('<p>').text(event.name).appendTo(wrapper);
    $('<p>').text(date).appendTo(wrapper);
    var expired = $('<p>').appendTo(wrapper);
    if (event.expired) {
        expired.addClass('expired');
        expired.removeClass('active');
        expired.text('Closed');
    } else {
        expired.addClass('active');
        expired.removeClass('expired');
        expired.text('Available');
    }
    return wrapper.clone();
}

// Remove and re-create the events.
var createEvents = function(events) {
    $('#events').empty();
    $(events).each(function (index, event) {
        $('#events').append(displayEvent(event));
    });
};

// Validate the status of all the events.
var validateStatus = function(events) {
    $(events).each(function (index, event) {
        event.expired = event.time.addMinutes(-30).getTime() - new Date().getTime() <= 0;
    });
    createEvents(events);
};

// ----------------------------------------------------------
// Begin execution of application.
// ----------------------------------------------------------

// Update event status every 3 seconds.
window.setInterval(function () {
    validateStatus(events);
}, updateFrequency);

// Validate and create events.
validateStatus(events);