aveyda7
@aveyda7
Photoshop

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

Каким образом написать на 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 все равно отсылает запросы на сервер.
  • Вопрос задан
  • 62 просмотра
Решения вопроса 1
Aetae
@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 запросы в интервале не рекомендуется: запрос может занять больше времени чем установленный интервал, в коем случае запросы начнут накапливаться как снежный ком и всё умрёт. Правильно делать следующий запрос только после завершения предыдущего.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы