3
\$\begingroup\$

I am trying to update my server to let it know that the user had some activity in the past 15 minutes. In order to do that, I made this implementation:

var page = {

    updated: false,

    change_state: function(e)   {
        var self = this;
        if(!this.updated){
            debugConsole.log('Moved mouse');
            setTimeout(function(){
                self.updated = false;
            },  //                10000); //10 seconds
                120000); //2 minutes
            this.updated = true;
            $.ajax({
                url: 'comet/update.php',
                success: function(data){
                    debugConsole.log('Moved mouse at: ' + data);
                }
            })
        }
    },

    mouse_click: function(e)    {
        this.updated = false;
    }

}

$("*").live('mousemove',function(e){
    e.stopPropagation();
    page.change_state(e); });

$("*").live('click',function(e){
    page.mouse_click(e); });

I made it so that it only takes effect after 2 minutes from the last action, unless the last action was a click.

Is this the best way of doing it?

\$\endgroup\$
2
\$\begingroup\$

I wouldn't recommend using $("*").live, you only need the events on the document body, so long as they are allowed to properly bubble.

\$\endgroup\$
  • \$\begingroup\$ How do i make the properly bubble? this page is live so the dom is changing all of the time \$\endgroup\$ – Neal May 6 '11 at 18:40
  • \$\begingroup\$ @Neal — Events bubble unless they are specifically prevented from doing so. You should be able to use $(document.body).bind instead of $("*").live (and you will see much better performance if you do). \$\endgroup\$ – Ben Blank May 6 '11 at 18:55
  • \$\begingroup\$ @BenBlank, how do i use document.bind? \$\endgroup\$ – Neal May 6 '11 at 18:58
1
\$\begingroup\$

I wouldn't alert the server every time the mouse moves. Instead I'd just make a note of the time. For letting the server know I'd set up an interval that tells the server if the user has been active recently.

var page = {
    lastUpdated: (new Date).getTime(),
    mouse_move: function(e)   {
        this.lastUpdated = (new Date).getTime();
    },
    mouse_click: function(e)    {
        this.lastUpdated = (new Date).getTime();
    },
    checkForLife: function () {
        if( page.lastUpdated + 15 * 60 * 1000 > (new Date).getTime() ) {
            $.post('comet/update.php',{status: 'alive'});
        } else {
            $.post('comet/update.php',{status: 'dead'});
        }
    }
}
$("body").mousemove( page.mouse_move );
$("body").click( page.mouse_click );
setInterval( page.checkForLife, 2 * 60 * 1000 );
\$\endgroup\$
  • \$\begingroup\$ how is this different than what i have? \$\endgroup\$ – Neal May 8 '11 at 5:11
  • \$\begingroup\$ 1: The event binding are only on the body. 2: The server interaction is handled in a separate setInterval, not an event. \$\endgroup\$ – generalhenry May 8 '11 at 7:34
  • \$\begingroup\$ yes but it happens every x seconds as opposed to hen they do the action, why would i want that? \$\endgroup\$ – Neal May 8 '11 at 18:58
  • \$\begingroup\$ 1: the posting loop also lets the server know the user is idle. 2: the posting loop is evenly rate limited to balance server load. \$\endgroup\$ – generalhenry May 8 '11 at 19:11
  • \$\begingroup\$ yes, but i dont want to send a message if no action was taken, this app may be for many users, and i dont want a high server hit \$\endgroup\$ – Neal May 8 '11 at 23:57
1
\$\begingroup\$

The .live() has been deprecated since jQuery 1.7 we use the .on() method now:

$("*").on('mousemove',function(e){
    e.stopPropagation();
    page.change_state(e); 
});

$("*").on('click',function(e){
    page.mouse_click(e); 
});

Also I wouldn't recommend attaching an event handler to that global element.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.