在JavaScript中对空闲状态执行操作

时间:2010-12-19 08:33:25

标签: javascript timeout python-idle mousemove

我正在尝试在执行以下操作的网页中设置脚本:如果鼠标处于非活动状态一段时间(例如,五秒),请执行操作(例如,隐藏元素);然后,如果鼠标移动,执行一个动作(比如说,取消隐藏元素)。

我想要的是对用户鼠标不活动执行操作的某种方式(不一定是键盘不活动)。

感谢您的帮助。

1 个答案:

答案 0 :(得分:4)

如果您使用的是jQuery:

(function() {
    var timeout;
    var isHidden = false;
    $(document).mousemove(function() {
        if (timeout) {
            window.clearTimeout(timeout);
        }
        timeout = window.setTimeout(function() {
            if (!isHidden) {
                //hide the element here
                isHidden = true;
            }
        }, 5000);
        if (isHidden) {
            //show the element here
            isHidden = false;
        }
    });
})();

非jQuery版本:

(function() {
    var timeout;
    var isHidden = false;

    function hideOnIdle() {
        if (timeout) {
            window.clearTimeout(timeout);
        }
        timeout = window.setTimeout(function() {
            if (!isHidden) {
                //hide the element here
                isHidden = true;
            }
        }, 5000);
        if (isHidden) {
            //show the element here
            isHidden = false;
        }
    }

    if (document.addEventListener) {
        document.addEventListener("mousemove", hideOnIdle);
    } else {
        document.attachEvent("onmousemove", hideOnIdle);
    }
})();

jsfiddle