javascript与用户空闲

核心提示：利用用户空闲时间 一般的聊天软件都会有一个很方便的功能，当用户长时间不操作时会自动设置状态为离开，javascript与用户空闲，这样其他人就不会因为对方迟迟不回复而胡乱猜想，以前也做过web聊天系统，一段时间后设置当前状态为空闲， 效果图： 图片看不清楚？请点击这里查看原图（大图），那么加入这个功能应该会锦上添花 ，

利用用户空闲时间

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

以前也做过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>