jquery的空闲和活动问题:当活动时更新mysql上的useronline时间戳

我只想在人们不空闲的时候更新用户在线数据库上的时间戳（键盘鼠标活动了一段时间，我正在使用jquery插件）。我的问题是我无法清除函数的间隔，所以在下面的测试脚本中，当它开始计数时，它永远不会停止，即使再次激活，它也会启动另一个计数器，这样它的计数速度会快一倍。我该如何停止计时器？这就像计数器在空闲时从未启动过一样——所以它找不到它来停止它。

在实际的脚本中，计数器将是$.get（）-更新mysql表的php。出于这个原因，我使用间隔，或者它会影响每一次鼠标移动，对吗？并且这将加载服务器。

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>

<!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>

相关内容

最新更新

热门标签：