jQuery空闲超时(作者:Eric Hynds)

时间:2019-03-06 20:38:59

标签: jquery redirect timer timeout idle-timer

使用Eric Hynds的jQuery Idle Timeout,但它似乎是一个废弃的项目。

此功能正在信息亭项目中使用(在Chrome开发工具中,分辨率必须为1080px宽x 1920px高),并将加载信息亭版本:http://dev.demo38.com/owu/

超时用于当用户离开自助服务亭,计时器触发倒计时警报时。可以将倒数计时重置为继续浏览,或者如果倒数计时,可以将信息亭重定向回主屏幕。

这曾经可以正常工作,但是开始出现以下控制台错误:

Uncaught TypeError: Cannot read property 'nodeType' of undefined
at Function.n.acceptData [as accepts] (jquery.js:3531)
at K.key (jquery.js:3556)
at K.set (jquery.js:3593)
at K.access (jquery.js:3652)
at Function.data (jquery.js:3761)
at Object.init (jquery.idletimeout.js?ver=1.2:32)
at Function.$.idleTimeout (jquery.idletimeout.js?ver=1.2:139)
at (index):825

有关该错误在何处触发/如何解决的任何见解?

第一个脚本是Paul Irish使用他的IdleTimer(jquery.idletimer.js)

(function($){

$.idleTimer = function f(newTimeout){

    //$.idleTimer.tId = -1     //timeout ID

    var idle    = false,        //indicates if the user is idle
        enabled = true,        //indicates if the idle timer is enabled
        timeout = 500,        //the amount of time (ms) before the user is considered idle
        events  = 'mousemove keydown DOMMouseScroll mousewheel mousedown', // activity is one of these events
      //f.olddate = undefined, // olddate used for getElapsedTime. stored on the function

    /* (intentionally not documented)
     * Toggles the idle state and fires an appropriate event.
     * @return {void}
     */
    toggleIdleState = function(){

        //toggle the state
        idle = !idle;

        // reset timeout counter
        f.olddate = +new Date;

        //fire appropriate event
        $(document).trigger(  $.data(document,'idleTimer', idle ? "idle" : "active" )  + '.idleTimer');            
    },

    /**
     * Stops the idle timer. This removes appropriate event handlers
     * and cancels any pending timeouts.
     * @return {void}
     * @method stop
     * @static
     */         
    stop = function(){

        //set to disabled
        enabled = false;

        //clear any pending timeouts
        clearTimeout($.idleTimer.tId);

        //detach the event handlers
        $(document).unbind('.idleTimer');
    },


    /* (intentionally not documented)
     * Handles a user event indicating that the user isn't idle.
     * @param {Event} event A DOM2-normalized event object.
     * @return {void}
     */
    handleUserEvent = function(){

        //clear any existing timeout
        clearTimeout($.idleTimer.tId);



        //if the idle timer is enabled
        if (enabled){


            //if it's idle, that means the user is no longer idle
            if (idle){
                toggleIdleState();           
            } 

            //set a new timeout
            $.idleTimer.tId = setTimeout(toggleIdleState, timeout);

        }    
     };


    /**
     * Starts the idle timer. This adds appropriate event handlers
     * and starts the first timeout.
     * @param {int} newTimeout (Optional) A new value for the timeout period in ms.
     * @return {void}
     * @method $.idleTimer
     * @static
     */ 


    f.olddate = f.olddate || +new Date;

    //assign a new timeout if necessary
    if (typeof newTimeout == "number"){
        timeout = newTimeout;
    } else if (newTimeout === 'destroy') {
        stop();
        return this;  
    } else if (newTimeout === 'getElapsedTime'){
        return (+new Date) - f.olddate;
    }

    //assign appropriate event handlers
    $(document).bind($.trim((events+' ').split(' ').join('.idleTimer ')),handleUserEvent);


    //set a timeout to toggle state
    $.idleTimer.tId = setTimeout(toggleIdleState, timeout);

    // assume the user is active for the first x seconds.
    $.data(document,'idleTimer',"active");




}; // end of $.idleTimer()



})(jQuery);

第二个脚本是超时/重定向(jquery.idletimeout.js)

(function($, win){

    var idleTimeout = {
        init: function( element, resume, options ){
            var self = this, elem;

            this.warning = elem = $(element);
            this.resume = $(resume);
            this.options = options;
            this.countdownOpen = false;
            this.failedRequests = options.failedRequests;
            this._startTimer();
            this.title = document.title;

            // expose obj to data cache so peeps can call internal methods
            $.data( elem[0], 'idletimeout', this );

            // start the idle timer
            $.idleTimer(options.idleAfter * 1000);

            // once the user becomes idle
            $(document).bind("idle.idleTimer", function(){

                // if the user is idle and a countdown isn't already running
                if( $.data(document, 'idleTimer') === 'idle' && !self.countdownOpen ){
                    self._stopTimer();
                    self.countdownOpen = true;
                    self._idle();
                }
            });

            // bind continue link
            this.resume.bind("click", function(e){
                e.preventDefault();

                win.clearInterval(self.countdown); // stop the countdown
                self.countdownOpen = false; // stop countdown
                self._startTimer(); // start up the timer again
                self._keepAlive( false ); // ping server
                options.onResume.call( self.warning ); // call the resume callback
            });
        },

        _idle: function(){
            var self = this,
                options = this.options,
                warning = this.warning[0],
                counter = options.warningLength;

            // fire the onIdle function
            options.onIdle.call(warning);

            // set inital value in the countdown placeholder
            options.onCountdown.call(warning, counter);

            // create a timer that runs every second
            this.countdown = win.setInterval(function(){
                if(--counter === 0){
                    window.clearInterval(self.countdown);
                    options.onTimeout.call(warning);
                } else {
                    options.onCountdown.call(warning, counter);
          document.title = options.titleMessage.replace('%s', counter) + self.title;
                }
            }, 1000);
        },

        _startTimer: function(){
            var self = this;

            this.timer = win.setTimeout(function(){
                self._keepAlive();
            }, this.options.pollingInterval * 1000);
        },

        _stopTimer: function(){
            // reset the failed requests counter
            this.failedRequests = this.options.failedRequests;
            win.clearTimeout(this.timer);
        },

        _keepAlive: function( recurse ){
            var self = this,
                options = this.options;

            //Reset the title to what it was.
            document.title = self.title;

            // assume a startTimer/keepAlive loop unless told otherwise
            if( typeof recurse === "undefined" ){
                recurse = true;
            }

            // if too many requests failed, abort
            if( !this.failedRequests ){
                this._stopTimer();
                options.onAbort.call( this.warning[0] );
                return;
            }

            $.ajax({
                timeout: options.AJAXTimeout,
                url: options.keepAliveURL,
                error: function(){
                    self.failedRequests--;
                },
                success: function(response){
                    if($.trim(response) !== options.serverResponseEquals){
                        self.failedRequests--;
                    }
                },
                complete: function(){
                    if( recurse ){
                        self._startTimer();
                    }
                }
            });
        }
    };

    // expose
    $.idleTimeout = function(element, resume, options){
        idleTimeout.init( element, resume, $.extend($.idleTimeout.options, options) );
        return this;
    };

    // options
    $.idleTimeout.options = {
        // number of seconds after user is idle to show the warning
        warningLength: 30,

        // url to call to keep the session alive while the user is active
        keepAliveURL: "",

        // the response from keepAliveURL must equal this text:
        serverResponseEquals: "OK",

        // user is considered idle after this many seconds.  10 minutes default
        idleAfter: 600,

        // a polling request will be sent to the server every X seconds
        pollingInterval: 60,

        // number of failed polling requests until we abort this script
        failedRequests: 5,

        // the $.ajax timeout in MILLISECONDS!
        AJAXTimeout: 250,

        // %s will be replaced by the counter value
        titleMessage: 'Warning: %s seconds until log out | ',

        /*
            Callbacks
            "this" refers to the element found by the first selector passed to $.idleTimeout.
        */
        // callback to fire when the session times out
        onTimeout: $.noop,

        // fires when the user becomes idle
        onIdle: $.noop,

        // fires during each second of warningLength
        onCountdown: $.noop,

        // fires when the user resumes the session
        onResume: $.noop,

        // callback to fire when the script is aborted due to too many failed requests
        onAbort: $.noop
    };

})(jQuery, window);

而且,这是触发以下内容的脚本:

$.idleTimeout('#idletimeout', '#idletimeout a', {
        idleAfter: 180,
        pollingInterval: 5,
        keepAliveURL: 'http://dev.demo38.com/owu/wp-content/themes/owu/keepalive.php',
        serverResponseEquals: 'OK',
        onTimeout: function(){
            $(this).slideUp();
            // window.location = home_url;
            window.location = "http://dev.demo38.com/owu/";
        },
        onIdle: function(){
            $(this).slideDown(); // show the warning bar
        },
        onCountdown: function( counter ){
            $(this).find("span").html( counter ); // update the counter
        },
        onResume: function(){
            $(this).slideUp(); // hide the warning bar
        }
    });

0 个答案:

没有答案