Detect Mousemovent inside of blur function Jquery

问题

I am trying to create a neat way to stop an AJAX called based upon if the browser is in focus, and if the mouse moves.. So here's what I want it to do:

If the user goes to a different tab in their browser, minimized the window, or goes somewhere else other than the web app, I want it to kill the AJAX calls in 1 minute. If the user moves the mouse anywhere in the web app, it should consider the user "focused" on the app, and thus continue the ajax calls. I put a timeout called "st" in there to take care of the "timeout" portion, but adding in a mouse detector is a little more advanced. Here's what I have:

var window_focus = true;
$(document).ready(function () {    

    $('#alertbox').click(function () {
        $('#alertbox').slideUp("slow");
    });

    // Check focal point
    $(window).focus(function () {
        if (window_focus) {
            return
        }
        window_focus = true;
        waitForMsg();

    }).blur(function () {
        if (!window_focus) {
            return
        }
        console.log('Init Suspension...');
        // Set Timeout
        $(function () {
            st = setTimeout(function () {
                clearTimeout(setTimeoutConst);
                window_focus = false;
                document.title = 'Timed Out | WEBSITE';
                console.log('Suspended');
            }, 60000);    
        });
    });

    waitForMsg();
});

I was going to try adding in something like this:

$(function () {
    $().mousemove(function () {
        console.log('Reinitialize');
        clearTimeout(st);
        waitForMsg();
    });
});

But it didn't work. Thanks for your help.

回答1:

http://jsfiddle.net/popnoodles/5mqMm/

You probably want this using .one(). This will see the mouse move, run your procedure and not run it again, until the window is reloaded or it's on another page.

Putting it inside of blur means blurring sets it up again.

}).blur(function () {
    $(document).one('mousemove', function(){
       // i react ONCE to the mouse being moved
         console.log('Reinitialize');
         clearTimeout(st);
         waitForMsg();
         // focus the window again as desired
         $(window).trigger('focus');
    });
    if (!window_focus) {
        return
    }
    console.log('Init Suspension...');
    // Set Timeout
    $(function () {
        st = setTimeout(function () {
            clearTimeout(setTimeoutConst);
            window_focus = false;
            document.title = 'Timed Out | WEBSITE';
            console.log('Suspended');
        }, 60000);    
    });
});

回答2:

Try this jsfiddle

var window_focus = true, lastMouseMoveTime;
$(document).ready(function () {    
    lastMouseMoveTime = new Date().getTime();
    $('#alertbox').click(function () {
        $('#alertbox').slideUp("slow");
    });

    // Check focal point
    $(window).focus(function () {
        if (window_focus) {
            return
        }
        window_focus = true;
        waitForMsg();

    }).blur(function () {
        if (!window_focus) {
            return
        }
        window_focus = false;
        console.log('Init Suspension...');
        // Set Timeout
    });

    waitForMsg();
    $(document).mousemove(function(){
        lastMouseMoveTime = new Date().getTime();
        if(!window_focus ){
            waitForMsg(); // restarting ajax if it stopped because of mousemove.
        }

    });

});

in your ajax call method

if( !window_focus){
     if( new Date().getTime() - lastMouseMoveTime   > 60*1000 ){
            return;
     }
}

来源：https://stackoverflow.com/questions/15422850/detect-mousemovent-inside-of-blur-function-jquery

标签

javascript

jquery

settimeout

mousemove