Как элегантно определить простой в JavaScript? - PullRequest
424 голосов
/ 20 марта 2009

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

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

Ответы [ 35 ]

0 голосов
/ 02 октября 2018

Я, наконец, получил это работает для моего сайта. Я нашел ответ Эквимана самым полезным. Проблема с этим ответом состоит в том, что функция alert() в javascript приостанавливает выполнение скрипта. Приостановка выполнения является проблемой, если вы хотите, как я сделал, отправить уведомление, а затем, если не получен ответ для автоматического выхода из системы.

Решение состоит в том, чтобы заменить alert() пользовательским делением, описанным здесь .

Вот код: ( ПРИМЕЧАНИЕ : вам нужно изменить строку 58, чтобы перенаправить на соответствующий URL для вашего сайта)

var inactivityTracker = function () {

  // Create an alert division
  var alertDiv = document.createElement("div");
  alertDiv.setAttribute("style","position: absolute;top: 30%;left: 42.5%;width: 200px;height: 37px;background-color: red;text-align: center; color:white");
  alertDiv.innerHTML = "You will be logged out in 5 seconds!!";

  // Initialise a variable to store an alert and logout timer
  var alertTimer;
  var logoutTimer;

  // Set the timer thresholds in seconds
  var alertThreshold = 3;
  var logoutThreshold = 5;

  // Start the timer
  window.onload = resetAlertTimer;

  // Ensure timer resets when activity logged
  registerActivityLoggers(resetAlertTimer);

  // ***** FUNCTIONS ***** //

  // Function to register activities for alerts
  function registerActivityLoggers(functionToCall) {
    document.onmousemove = functionToCall;
    document.onkeypress = functionToCall;
  }

  // Function to reset the alert timer
  function resetAlertTimer() {
    clearTimeout(alertTimer);
    alertTimer = setTimeout(sendAlert, alertThreshold * 1000);
  }

  // Function to start logout timer
  function startLogoutTimer() {
    clearTimeout(logoutTimer);
    logoutTimer = setTimeout(logout, logoutThreshold * 1000);
  }

  // Function to logout
  function sendAlert() {

    // Send a logout alert
    document.body.appendChild(alertDiv);

    // Start the logout timer
    startLogoutTimer();

    // Reset everything if an activity is logged
    registerActivityLoggers(reset);
  }

  // Function to logout
  function logout(){

    //location.href = 'index.php';
  }

  // Function to remove alert and reset logout timer
  function reset(){

    // Remove alert division
    alertDiv.parentNode.removeChild(alertDiv);

    // Clear the logout timer
    clearTimeout(logoutTimer);

    // Restart the alert timer
    document.onmousemove = resetAlertTimer;
    document.onkeypress = resetAlertTimer;
  }
};
<html>

  <script type="text/javascript" src="js/inactivityAlert.js"></script> 

  <head>
		<title>Testing an inactivity timer</title>
	</head>
	<body onload="inactivityTracker();" >
      Testing an inactivity timer
  </body>
  
</html>
0 голосов
/ 25 сентября 2018

Дебад на самом деле отличная идея! Вот версия для бесплатных проектов jQuery:

const derivedLogout = createDerivedLogout(30);
derivedLogout(); // it could happen that user too idle)
window.addEventListener('click', derivedLogout, false);
window.addEventListener('mousemove', derivedLogout, false);
window.addEventListener('keyup', derivedLogout, false); 

function createDerivedLogout (sessionTimeoutInMinutes) {
    return _.debounce( () => {
        window.location = this.logoutUrl;
    }, sessionTimeoutInMinutes * 60 * 1000 ) 
}
0 голосов
/ 20 марта 2009

Ну, вы можете прикрепить событие click или mousemove к телу документа, которое сбрасывает таймер. У вас есть функция, которую вы вызываете через определенные интервалы времени, которая проверяет, истек ли таймер в течение определенного времени (например, 1000 миллисекунд), и начинайте предварительную загрузку.

0 голосов
/ 21 марта 2009

Javascript не может определить загрузку процессора. Это нарушит работу javascript в песочнице.

Кроме этого, перехват событий onmouseover и onkeydown страницы, вероятно, будет работать.

Вы также можете установить использование setTimeout в событии onload, чтобы запланировать функцию, вызываемую после задержки.

// Call aFunction after 1 second
window.setTimeout(aFunction, 1000);
0 голосов
/ 16 июля 2014

Пробовал решение @freddoo, но оно не работало в течение 1 минуты, поэтому я немного изменил его, чтобы записать дату + время, когда пользователь последний раз щелкнул страницу, и в моей функции timerIncrement я вычисляю разницу между текущее время и время последнего нажатия, и если значение оказывается больше или равно значению времени ожидания, я перенаправляю:

var clickedDate = new Date();
var idleTime = 1;//

function timerIncrement() {

    var nowDate = new Date();
    var diffMs = (nowDate - clickedDate); //Milliseconds between now & the last time a user clicked somewhere on the page
    var diffMins = Math.round(((diffMs % 86400000) % 3600000) / 60000); //Convert ms to minutes

    if (diffMins >= idleTime) {
        //Redirect user to home page etc...
    }
}

$(document).ready(function () {

    var idleInterval = setInterval(timerIncrement, 60000); // 1 minute

    $(this).click(function (e) {
        clickedDate = new Date();
    });

});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...