当用户空闲时，如何触发事件？

Question

当用户在指定时间内从网站上空闲时，如何触发JQuery事件，并在鼠标移动、滚动或按下键时重置计时器。

Answer 1

这是通过使用setTimeout函数在指定的秒结束时触发的。如果在这段时间内基本上发生了什么事情(鼠标移动，页面被滚动，或者按下一个键)，超时时间就会被重置。

将空闲期间设置在第三行。

idleTimer = null;
idleState = false;
idleWait = 2000;

(function ($) {

    $(document).ready(function () {

        $('*').bind('mousemove keydown scroll', function () {

            clearTimeout(idleTimer);

            if (idleState == true) { 

                // Reactivated event
                $("body").append("<p>Welcome Back.</p>");            
            }

            idleState = false;

            idleTimer = setTimeout(function () { 

                // Idle Event
                $("body").append("<p>You've been idle for " + idleWait/1000 + " seconds.</p>");

                idleState = true; }, idleWait);
        });

        $("body").trigger("mousemove");

    });
}) (jQuery)

Answer 2

下面是一个使用JQuery处理mousemove和keypress事件的简单脚本。如果时间过期，则触发spinner包装事件。

    <script type="text/javascript">
    var idle = 0;
    $(document).ready(function () {
        //Increment the idle time counter every seconds.
        var idleInterval = setInterval(timerIncrement, 1000); // 1 seconds
        //Zero the idle timer on mouse move.
        $(this).mousemove(function (e) {
            idle = 0;
        });
        // zero the idle timer on keypress
        $(this).keypress(function (e) {
            idle = 0;
        });
    });

    function timerIncrement() {
        idle = idle + 1;
        if (idle > 5) { // 5 seconds
        $('.spinner-wrap').trigger('click');
        }
    }
    </script>