javascript根据用户活动操作定时关闭通知栏插件

使用方法

function debounce(func, threshold) {
    var timeout;

    return function() {
        var context = this,
            args = arguments;

        if (timeout) {
            clearTimeout(timeout);
        }

        timeout = setTimeout(function() {
            func.apply(context, args);

            timeout = null;
        }, threshold || 250);
    };
}

var SessionTimeout = (function() {
    var session_duration = 10,
        session_timeout_id,
        logout_duration = 15, //15 minutes
        session_timeout_duration = (session_duration - logout_duration) * 1000,
        logout_id,
        logout_timeout_duration = logout_duration * 1000,
        events = 'keydown mousedown',
        notification_element;

    return {
        init: function() {
            var that = this;

            document.addEventListener(events.split(' ')[0], debounce(function () {
                that.handler.apply(that);
            }, 500));
            
            this.startIdleTimeout();
        },

        handler: function() {                    
            // reset session timeout
            clearTimeout(session_timeout_id);

            this.startIdleTimeout();
        },
      
        startIdleTimeout: function () {
            var that = this;

            session_timeout_id = setTimeout(function () {
                that.idle.apply(that); 
            }, session_timeout_duration);
        },

        idle: function() {
            // create bar
            notification_element = this.createTimeoutNotification();

            // display bar
            notification_element.style.display = 'block';

            // remove events
            document.removeEventListener('keydown', this.handler);
            document.removeEventListener('mousedown', this.handler);

            // start logout timeout
            this.startLogoutTimeout();
            
            // start logout countdown
            this.startLogoutCountdown();

            // add logout events
            this.attachTimeoutNotificationEvents();
        },

        createTimeoutNotification: function() {
            var notification_element = document.createElement('div');
            notification_element.className = 'session-timeout-notification';
            notification_element.innerHTML = [
                '<strong>Hey!</strong> you will be logged off in <strong class="time">' + logout_duration + '</strong> seconds due to inactivity. ',
                '<a href="#">Click here to continue using www.example.com</a>'
            ].join('');
            
            document.body.appendChild(notification_element);

            return notification_element;
        },

        removeTimeoutNotification: function() {
            notification_element.style.display = 'none';
            document.body.removeChild(notification_element);
        },

        attachTimeoutNotificationEvents: function() {
            var that = this,
                dismiss_element = notification_element.querySelector('a');

            dismiss_element.addEventListener('click', function() {
                // reset timer to prevent logout
                clearTimeout(logout_id);

                that.removeTimeoutNotification();

                that.init();
            });
        },

        startLogoutTimeout: function() {
            var that = this;

            logout_id = setTimeout(function() {
                alert('REDIRECT:LOGOUT');
                
                that.removeTimeoutNotification.apply(that);
            }, logout_timeout_duration);
        },

        startLogoutCountdown: function(time) {
            var that = this,
                time = time || logout_duration - 1;

            setTimeout(function() {
                notification_element.querySelector('.time').innerHTML = time;

                time--;

                if (time > 0) {
                    that.startLogoutCountdown.call(that, time);
                }
            }, 1000);
        }
    };
}());

SessionTimeout.init();