javascript - 在模糊功能Jquery中检测Mousemove

Question

我正在尝试创建一种巧妙的方法来停止基于浏览器是否处于焦点以及鼠标移动的 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();
    });
});

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

Answer 1

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

Answer 2

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