Проблема с бездействием и активным с JQuery: при активном обновлении использовать метку времени timeline на MySQL - PullRequest
Новая
       317

Проблема с бездействием и активным с JQuery: при активном обновлении использовать метку времени timeline на MySQL

1 голос
/ 25 мая 2011

Я хочу обновлять отметку времени в базе данных useronline, только когда люди не находятся в режиме ожидания (в течение некоторого времени активна клавиатурная мышь - для этого я использую плагин jquery). Проблема для меня заключается в том, что я не могу очистить интервал для функция в моем тестовом скрипте ниже, когда он начинает считать, он никогда не останавливается, и даже когда снова активен, он запускает другой счетчик, так что он, как и его счет, увеличивается в два раза быстрее. Как я должен остановить этот таймер? Это похоже на то, что счетчик никогда не запускался во время простоя, поэтому он не может его остановить.

В реальном скрипте счетчиком будет $ .get () - php, который обновляет таблицу mysql. По этой причине я использую интервалы, или это получилось бы при каждом движении мыши, верно? и это будет загрузка сервера.

http://jsbin.com/uleza5 для проверки, просто не двигайте мышь в течение 6 секунд, затем просмотрите неработающий текст, затем переместите мышь, и она начнет считать; через 6 секунд он снова будет бездействовать, когда неактивен. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><script src="js/jquery_plugin_timer2.js"></script> 
  <script src="https://github.com/paulirish/jquery-idletimer/raw/master/jquery.idle-timer.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>timertest</title>
<script language="javascript">

$(document).ready(function(){
    $('.status').html('active');
});

x = 0;
function count() { 
        x+=1;
        $('.usercount').html(x);
        }

(function() {

    var timeout = 6000;
  var it;
    $(document).bind("idle.idleTimer", function() {
    clearInterval(it);    
        $('.status').html('idle');
    });


    $(document).bind("active.idleTimer", function() {
      var it = setInterval(count, 1000);
     $('.status').html('active');
    });
   $.idleTimer(timeout);

})(jQuery);

</script>
</head>

<body>
<div class="status" style="border:1px dashed black; width:500px; height:50px;"></div>
<div class="usercount"style="border:1px dashed black; width:500px; height:50px;"></div>
</body>
</html>

1 Ответ

1 голос
/ 25 мая 2011 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><script src="js/jquery_plugin_timer2.js"></script> 
  <script src="https://github.com/paulirish/jquery-idletimer/raw/master/jquery.idle-timer.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>timertest</title>
<script language="javascript">
var it;
$(document).ready(function(){
    $('.status').html('active');
});

x = 0;
function count() { 
        x+=1;
        $('.usercount').html(x);
        }

(function() {

    var timeout = 6000;

    $(document).bind("idle.idleTimer", function() {
    clearInterval(it);    
        $('.status').html('idle');
    });


    $(document).bind("active.idleTimer", function() {
      it = setInterval(count, 1000);
     $('.status').html('active');
    });
   $.idleTimer(timeout);

})(jQuery);

</script>
</head>

<body>
<div class="status" style="border:1px dashed black; width:500px; height:50px;"></div>
<div class="usercount"style="border:1px dashed black; width:500px; height:50px;"></div>
</body>
</html>
...