Как отследить время провождения пользователя на странице?

Question

[Антон Вейда]

Каким образом написать на JS функцию, которая при активности пользователя отсылает ajax запрос на сервер, но как только пользователь перестал проявлять движения мышкой по странице, через 5 секунд запросы на сервер перестают поступать.

idleTimer = null;
idleState = false; // состояние отсутствия
idleWait = 60000; // время ожидания в мс. (1/1000 секунды)

$(document).ready( function(){
    $(document).bind('mousemove keydown scroll', function(){
        clearTimeout(idleTimer); // отменяем прежний временной отрезок
        if(idleState == true){
            // Действия на возвращение пользователя
            setInterval(function(){
                /* цикл, в нем отсылаем запросы по аяксу */
                console.log('online');
            }, 1000);

        }

        idleState = false;
        idleTimer = setTimeout(function(){
            // Действия на отсутствие пользователя
            console.log('offline');
            idleState = true;
        }, idleWait);
    });

    $("body").trigger("mousemove"); // сгенерируем ложное событие, для запуска скрипта
});

Думал поступить следующим образом, но в этом коде не устраивает несколько моментов:
1. При загрузке страницы нет статуса не оффлайн, не онлайн.
2. Если человек отошел от страницы, получил оффлайн, а потом получил статус онлайн, а потом снова ушел в оффлайн, setInterval все равно отсылает запросы на сервер.

Comments

[Александр]

Это мощно конечно, слать запросы по AJAX'у каждую секунду. Сервер не умрёт так у Вас?

Answer 1

[Aetae]

Такие вещи ты должен сам писать. Тут не хватает только капельки логики - именно того, что должен юзать прогер.

Вот код, но до добра тебя он не доведёт

function getDebouncedReq(params) {
  var state = debounced.state = false;

  var _debounce = null;
  var _interval = null;
  var _that = null, _args = [];

  function debounced() {
    _that = this;
    _args = Array.prototype.slice.call(arguments, 0);
    if(state === false) {
      state = debounced.state = true;
      if(params.onOnline) 
        params.onOnline.apply(_that, _args);
      _interval = setInterval(function(){
        if(params.onInterval)
          params.onInterval.apply(_that, _args);
      }, params.interval || 1000);
    } 
    clearTimeout(_debounce);
    _debounce = setTimeout(function(){
      clearInterval(_interval)
      state = debounced.state = false;
      if(params.onOffline) 
        params.onOffline.apply(_that, _args);
    }, params.idleWait || 60000);
  }

  return debounced;
}

$(document).ready( function(){
  var requester = getDebouncedReq({
    idleWait: 6000,
    interval: 1000,
    onOffline: function(){
      console.log('offline');
    },
    onOnline: function(){
      console.log('online');
    },
    onInterval: function(){
      console.log('interval');
    }
  }, 10000)

  $(document).bind('mousemove keydown scroll', requester);
  $(document).trigger("mousemove"); 

  $(document).bind('click', function() {
    alert(requester.state)
  });
});

P.S. Посылать ajax запросы в интервале не рекомендуется: запрос может занять больше времени чем установленный интервал, в коем случае запросы начнут накапливаться как снежный ком и всё умрёт. Правильно делать следующий запрос только после завершения предыдущего.

Comments

[Антон Вейда]

Спасибо, куплю книгу, буду учить.

[Aetae]

Антон Вейда, как я выше написал - нужна логика, а не знания. Ты все нужные функции знаешь, надо было только их "расставить в правильном порядке". Тут поможет скорее рисование на бумажке, а не книга.)

[Антон Вейда]

Заставил задуматься!)