使用 jquery 进行空闲和活动的问题：当活动更新 mysql 上的 useronline 时间戳时

发布于 2024-11-09 12:00:57 字数 1842 浏览 0 评论 0原文

我只想在人们不空闲时更新 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>

原文

I want to update the timestamp on useronline database only when people aren't idle (keyboard mouse active for some time-I am using a jquery plugin for that) The problem for me is that I can't clear the interval for the function so in my test script below, when it starts counting it never stops and even when active again it starts another counter so that its like its counting twice as fast. How am I supposed to stop that timer? Its like the counter has never been started when its idle- so it can't find it to stop it.

In the real script the counter will be $.get()-ing the php that updates the mysql table. For that reason i'm using intervals, or it would get on every mouse move right? and that would be loading the server.

http://jsbin.com/uleza5 to test just don't move mouse for 6 seconds then see the idle text, then move the mouse and it will start counting; after 6 seconds it will go idle again when inactive.

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

一笔一画续写前缘 2024-11-16 12:00:57

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

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

回复收藏 0 原文

~没有更多了~