Web界面无人操作时触发事件 onNobodyEvent
- - ITeye博客灵感源于一个投射展示型项目,代码很简单并包含注释就不做累述了. // 人为操作事件支持,以下事件触发将被认定为当前页面存在人为操作. // 按ID缓存对应nobody事件的内部对象用于后续事件销毁. * @param func 事件触发时的回调函数. * @param timeout 无人操作事件触发延迟时间. 
/*
 * nobody.js
 * @author Yimo
 * @version v1.0
 */
(function(){
	// 人为操作事件支持,以下事件触发将被认定为当前页面存在人为操作
	var events = ['mousemove','keypress','mousedown','mousewheel'];
	
	// 添加事件
	function addEvent(type,handler){
		if (window.addEventListener){
			window.addEventListener(type, handler, false);
        } else if (window.attachEvent){
        	window.attachEvent("on" + type, handler);
        } else {
        	window["on" + type] = handler;
        }
	}
	
	// 移除事件
	function removeEvent(type,handler){
		if (window.removeEventListener){
			window.removeEventListener(type, handler, false);
        } else if (window.detachEvent){
        	window.detachEvent("on" + type, handler);
        } else {
        	window["on" + type] = null;
        }
	}
	// 按ID缓存对应nobody事件的内部对象用于后续事件销毁
	var cache = {};
	
	/*
	 * 无人操作事件
	 * 
	 * @param func 事件触发时的回调函数
	 * @param timeout 无人操作事件触发延迟时间
	 * @param onlyonce 是否仅触发一次
	 * 
	 * @return 事件定时器ID
	 */
	window.onNobody = function(func,timeout,onlyonce){
		// 域内独立对象,保证onNobody每次调用都有一个属于自己的detail对象
		var detail = {
			 counter : 0,
			 lastTime : new Date().getTime(),
			 reset : function(){
				 detail.counter = 0;
			 }
		}
		for(var i = 0; i < events.length; i++){
			addEvent(events[i],detail.reset);
		};
		var id = setInterval(function(){
			if(detail.counter >= timeout){
				func();
				if(!onlyonce){
					detail.counter = 0;
				}else{
					window.clearNobody(id);
				}
			}
			var time = new Date().getTime();
			detail.counter += time - detail.lastTime;
			detail.lastTime = time;
		},1);
		cache[id] = detail;
		return id;
	}
	
	/*
	 * 移除无人操作事件
	 * 
	 * @param id 添加无人操作事件时返回的ID
	 */
	window.offNobody = function(id){
		clearInterval(id);
		for(var i = 0; i < events.length; i++){
			removeEvent(events[i],cache[id].reset);
		};
	}
})();