javascript与用户空闲

利用用户空闲时间

一般的聊天软件都会有一个很方便的功能，当用户长时间不操作时会自动设置状态为离开，这样其他人就不会因为对方迟迟不回复而胡乱猜想。
以前也做过web聊天系统，那么加入这个功能应该会锦上添花 ，当你空闲时候告诉你的好友我可能离开了。

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

具体逻辑：

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

效果图：

javascript与用户空闲

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

<script type="text/javascript" src="ext-core-min.js"></script>
<div id="test">
	
	<input id="testInput" />

</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/>";
		};
		
		/*
		 can not stop it ,that's good
		*/
		Ext.get("testInput").on("mouseover",function(evt){
			evt.stopEvent();
		});
		
		Ext.get("testInput").on("keydown",function(evt){
			evt.stopEvent();
		});
		//... other config
		
		//start monitor
		Ext.ux.IdleJudger.start();
	});
</script>

javascript与用户空闲

相关推荐