javascript与用户空闲


利用用户空闲时间

  一般的聊天软件都会有一个很方便的功能,当用户长时间不操作时会自动设置状态为离开,这样其他人就不会因为对方迟迟不回复而胡乱猜想。

  以前也做过web聊天系统,那么加入这个功能应该会

  锦上添花

  ,当你空闲时候告诉你的好友我可能离开了。

  那么关键是怎么判断当前用户是否空闲,一般网页接受两种输入设备的信号:鼠标,键盘,会触发相应的事件 keydown mousemove,那么我们只要全局监控这两种事件就可以了。

  具体逻辑:

  Js代码

初始设置空闲 
当用户有动作 
  如果有定时器设置就清空,进入繁忙了 
  如果当前是空闲,就设置为idle,通知程序 
  否则就设置定时器,一段时间后设置当前状态为空闲。
 

  效果图:

  写段代码测试一下: (附件示例)

  Js代码

<script type="text/javascript" src="ext-core-min.js"></script> 
<div id="test"></div> 
<script type="text/javascript"> 
 Ext.ns("Ext.ux"); 
 Ext.ux.IdleJudger=(function(){ 
 //private:当前是否空闲 
 var idle=true; 
 var idleTimer; 
  
  
 var pub = { 
  //多长时间没操作会被通知idle,可 Ext.ux.IdleJudger.idleDuration 自己设置 
  //for override 
  idleDuration:5000, 
  
  //状态查询 
  //readonly 
  isIdle:function(){return idle;}, 
  
  //是否启用该功能,自己设置 
  //for override 
  enable:true, 
  
  //用户开始空闲通知,自己设置 
  //for override 
  idleHandler:function(){console.log("i start idle !");}, 
  
  //用户开始繁忙通知,自己设置 
  //for override 
  busyHandler:function(){console.log("i start busy !");}, 
  start:start 
 }; 
  
  
 function setIdle(){ 
  idle=true; 
  if(pub.idleHandler) pub.idleHandler(); 
 } 
  
  
 function check(){ 
  if(!pub.enable) return; 
  //前段设置的空闲取消 
  clearTimeout(idleTimer); 
  if(idle) { 
  idle=false; 
  if(pub.busyHandler)pub.busyHandler(); 
  } 
  //pub.idleDuration 后设置空闲  
  idleTimer=setIdle.defer(pub.idleDuration); 
 } 
  
 function start() { 
  //两种输入设备触动了 
  Ext.getDoc().on("keydown",check); 
  Ext.getDoc().on("mousemove",check); 
 } 
  
 return pub; 
  
 })(); 
</script> 
 
 
 
<script type="text/javascript"> 
 Ext.onReady(function(){ 
 //set up config 
 Ext.ux.IdleJudger.idleDuration=5000; 
 var logger=Ext.getDom("test"); 
 Ext.ux.IdleJudger.idleHandler = function(){ 
  logger.innerHTML+=new Date()+" : i start idle <br/>"; 
 }; 
 Ext.ux.IdleJudger.busyHandler = function(){ 
  logger.innerHTML+=new Date()+" : i start busy <br/>"; 
 }; 
 //... other config 
  
 //start monitor 
 Ext.ux.IdleJudger.start(); 
 }); 
</script>


« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3