Как элегантно определить простой в JavaScript?

Question

Можно ли определить время " простоя " в JavaScript?
Вероятно, мой основной вариант использования - предварительная загрузка или предварительная загрузка содержимого.

Время простоя: Период бездействия пользователя или без использования процессора

Answer 1

Возможно, вы могли бы что-то взломать, обнаружив движение мыши по телу формы и обновив глобальную переменную с учетом времени последнего перемещения. Затем вам потребуется запустить интервальный таймер, который периодически проверяет время последнего движения и что-то предпринимает, если оно прошло достаточно долго с момента обнаружения последнего движения мыши.

Answer 2

Попробуйте эту работу идеально ...

var IDLE_TIMEOUT = 10; //seconds
var _idleSecondsCounter = 0;

document.onclick = function () {
    _idleSecondsCounter = 0;
};

document.onmousemove = function () {
    _idleSecondsCounter = 0;
};

document.onkeypress = function () {
    _idleSecondsCounter = 0;
};

window.setInterval(CheckIdleTime, 1000);

function CheckIdleTime() {
    _idleSecondsCounter++;
    var oPanel = document.getElementById("SecondsUntilExpire");
    if (oPanel)
        oPanel.innerHTML = (IDLE_TIMEOUT - _idleSecondsCounter) + "";
    if (_idleSecondsCounter >= IDLE_TIMEOUT) {
        alert("Time expired!");
        document.location.href = "SessionExpired.aspx";
    }
}

Answer 3

<script type="text/javascript">
var idleTime = 0;
$(document).ready(function () {
    //Increment the idle time counter every minute.
    idleInterval = setInterval(timerIncrement, 60000); // 1 minute

    //Zero the idle timer on mouse movement.
    $('body').mousemove(function (e) {
     //alert("mouse moved" + idleTime);
     idleTime = 0;
    });

    $('body').keypress(function (e) {
      //alert("keypressed"  + idleTime);
        idleTime = 0;
    });



    $('body').click(function() {
      //alert("mouse moved" + idleTime);
       idleTime = 0;
    });

});

function timerIncrement() {
    idleTime = idleTime + 1;
    if (idleTime > 10) { // 10 minutes

        window.location.assign("http://www.google.com");
    }
}
</script> 

Я думаю, что этот jquery-код идеален, хотя его ответы скопированы и изменены сверху !! Донот забыл включить библиотеку jquery в ваш файл!

Answer 4

Если вы используете браузер с поддержкой (Chrome или Firefox по состоянию на декабрь 2018 года), вы можете поэкспериментировать с requestIdleCallback и включить requestIdleCallback shim для неподдерживаемых браузеры.

Answer 5

Чистый JavaScript с правильно установленным временем сброса и привязками через addEventListener

(function() {

  var t,
    timeout = 5000;

  function resetTimer() {
    console.log("reset: " + new Date().toLocaleString());
    if (t) { 
      window.clearTimeout(t); 
    }
    t = window.setTimeout(logout, timeout);
  }

  function logout() {
    console.log("done: " + new Date().toLocaleString());
  }
  resetTimer();

  //And bind the events to call `resetTimer()`
  ["click", "mousemove", "keypress"].forEach(function(name) {
    console.log(name);
    document.addEventListener(name, resetTimer);
  });

}());

Answer 6

Я написал небольшой класс ES6 для обнаружения активности и запуска событий на время простоя. Он охватывает клавиатуру, мышь и сенсорный , может быть активирован и деактивирован и имеет очень тонкий API:

const timer = new IdleTimer(() => alert('idle for 1 minute'), 1000 * 60 * 1);
timer.activate();

Он не зависит от jQuery, хотя вам может потребоваться запустить его через Babel для поддержки старых браузеров.

https://gist.github.com/4547ef5718fd2d31e5cdcafef0208096

Я могу выпустить его как пакет npm, как только получу отзыв.

Answer 7

Я написал простой плагин jQuery, который будет делать то, что вы ищете.

https://github.com/afklondon/jquery.inactivity

$(document).inactivity( {
    interval: 1000, // the timeout until the inactivity event fire [default: 3000]
    mouse: true, // listen for mouse inactivity [default: true]
    keyboard: false, // listen for keyboard inactivity [default: true]
    touch: false, // listen for touch inactivity [default: true]
    customEvents: "customEventName", // listen for custom events [default: ""]
    triggerAll: true, // if set to false only the first "activity" event will be fired [default: false]
});

Скрипт будет прослушивать мышь, клавиатуру, сенсорный экран и другие нестандартные события (бездействие) и запускать глобальные события "активность" и "неактивность".

Надеюсь, это поможет:)

Answer 8

Вот лучшее решение, которое я нашел: http://css -tricks.com / сниппет / JQuery / противопожарные события, когда пользователь-это-простаивает /

Вот JS:

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 9

Проблема со всеми этими решениями, хотя и правильная, но она нецелесообразна, если учитывать ценный набор времени ожидания сеанса, используя PHP, .NET или в файле Application.cfc для разработчиков Coldfusion. Время, установленное вышеупомянутым решением, должно синхронизироваться с тайм-аутом сеанса на стороне сервера. Если они не синхронизируются, вы можете столкнуться с проблемами, которые просто разочаруют и запутают ваших пользователей. Например, время ожидания сеанса на стороне сервера может быть установлено равным 60 минутам, но пользователь может полагать, что он / она безопасен, поскольку захват времени простоя JavaScript увеличил общее количество времени, которое пользователь может провести на одной странице. Пользователь, возможно, провел время, заполняя длинную форму, а затем отправляет ее. Тайм-аут сеанса может наступить до обработки отправки формы. Я стараюсь дать своим пользователям 180 минут, а затем использую JavaScript для автоматического выхода из системы. По сути, с использованием некоторого кода выше, чтобы создать простой таймер, но без захвата части события мыши. Таким образом, время на стороне клиента и сервера отлично синхронизируется. Не возникает путаницы, если вы показываете время пользователю в своем пользовательском интерфейсе, так как оно сокращается. Каждый раз, когда в CMS осуществляется доступ к новой странице, сеанс на стороне сервера и таймер JavaScript сбрасываются. Просто и элегантно. Если пользователь остается на одной странице более 180 минут, я думаю, что с этой страницей что-то не так, во-первых.

Answer 10

Вы можете использовать нижеприведенное решение

var idleTime;
$(document).ready(function () {
         reloadPage();
        $('html').bind('mousemove click mouseup mousedown keydown keypress keyup submit change mouseenter scroll resize dblclick', function () {
            clearTimeout(idleTime);
            reloadPage();
        });
});
function reloadPage() {
    clearTimeout(idleTime);
    idleTime = setTimeout(function () {
        location.reload();
    }, 3000);
}