在模糊函数Jquery中检测Mousemovent

时间:2013-03-15 00:48:02

标签: javascript jquery settimeout mousemove

我正在尝试创建一种简洁的方法来停止调用AJAX,如果浏览器处于焦点状态,并且鼠标是否移动..那么这就是我想要它做的事情:

如果用户访问浏览器中的其他选项卡,最小化窗口,或者转到除Web应用程序以外的其他位置,我希望它在1分钟内终止AJAX调用。如果用户将鼠标移动到Web应用程序中的任何位置,则应将用户“聚焦”在应用程序上,从而继续执行ajax调用。我在那里放了一个名为“st”的超时来处理“超时”部分,但添加一个鼠标检测器更先进一些。这就是我所拥有的:

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();
});

我打算尝试添加类似的内容:

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

但它没有用。谢谢你的帮助。

2 个答案:

答案 0 :(得分:0)

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

您可能希望使用.one()。这将看到鼠标移动,运行您的程序而不是再次运行它,直到重新加载窗口或它在另一页上。

将其置于模糊区域内意味着模糊会重新设置它。

}).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);    
    });
});

答案 1 :(得分:0)

试试这个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.
        }

    });

});
你的ajax调用方法中的

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