Web界面无人操作时触发事件 onNobodyEvent

标签: web 界面 事件 | 发表时间:2014-02-20 15:07 | 作者:
出处:http://www.iteye.com
灵感源于一个投射展示型项目,代码很简单并包含注释就不做累述了。
/*
 * 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);
		};
	}
})();


已有 0 人发表留言,猛击->> 这里<<-参与讨论


ITeye推荐



相关 [web 界面 事件] 推荐:

Web界面无人操作时触发事件 onNobodyEvent

- - ITeye博客
灵感源于一个投射展示型项目,代码很简单并包含注释就不做累述了. // 人为操作事件支持,以下事件触发将被认定为当前页面存在人为操作. // 按ID缓存对应nobody事件的内部对象用于后续事件销毁. * @param func 事件触发时的回调函数. * @param timeout 无人操作事件触发延迟时间.

50+PSD用户界面Web设计素材

- DayuLu - 互联网的那点事
对于很多设计初学者来说很多高手的界面设计得让他们惊叹. 其实,对于真正的设计老手来说,他们有能力设计出各种效果,但是即便这样也是需要大量的时间的. 在大多数的中小企业中这样的完全独立设计师很少见的. 老练的设计师都有一套属于自己的设计素材库,里面包罗万象会让各种菜鸟汗颜. 这些就好比日积月累的各种武术套路,当需要那种就自然的打了出来,快、准、狠.

使用Dojo Toolkit来生成动态的移动web界面

- Guan - 译言-每日精品译文推荐
(译者注:由于yeeyan编辑器对文章中的标签做解析的原因,我在每个标签的空格,比如说,左尖括号<+script+右尖括号>,我会写成< script>,以便其能够在文章中正确显示,不便之处敬请谅解. 使用移动设备是最流行的浏览网页方式之一,随着移动设备用户的不断增加,开发更多的移动应用和移动友好型网站的要求被提了出来.

反向Ajax,第5部分:事件驱动的Web开发

- Taozi - 译言-电脑/网络/数码科技
到目前为止你已经了解了创建通过事件来通信的组件,在本系列的最后一部分内容中,我们把事件驱动开发的原则应用到实践中,构建一个示例性的事件驱动web应用. 你可以下载本文中使用的源代码. 理想情况下,要充分体会本文的话,你应该对JavaScrpit和Java有一定的了解,并且要有一些web开发经验. 若要运行本文中的例子,你还需要最新版本的Maven和JDK(参见参考资料).

45个新鲜的Web和移动设备用户界面PSD文件套件

- - Jackchen Design 1984
我们都知道,都清楚移动端这两年发展的速度. 各大互联网公司甚至非互联网公司都在争夺移动端的入口. 分析统计也显示人们使用移动设备的数值在直线上升. 看看我们周边的朋友也会发现,习惯已经开始形成. 人们更喜欢在移动设备上完成工作和娱乐. PC的黄金时代似乎就这样匆匆结束了. 设计和交互都是吸引用户的第一要素.

百度云开放“手势事件库”惠及99%Web App开发者

- - Web App Trend
“百度云平台开放‘手势事件库’是开发者的福音,这是99%的Web App开发者都会用到的工具. ”12月28日,百度云平台相关负责人介绍道. 这源于近日百度为开发者正式对外开放了“手势事件库”(code.baidu.com)开发工具,这成为国内首家对外免费开放事件库的一线厂商. 业内人士评价,这将进一步帮助开发者借助百度领先的技术成果和开发工具,更简单、便捷地开发出优质的移动Web App,缩短从应用创意到产品产出的周期,从而更快速地抢占应用市场.

Web未死

- Sinan - GeekPark 捕风捉影
App的极限已经浮现,而Web则是突破此极限,推动下一个数字时代革命的起点. 距离美国《连线》杂志发表《Web已死,互联网永生》这篇文章还不到一年的时间,业界为Web平反的声音渐起. 2010年1月,苹果发布iPad,紧随其后在6月又发布了iPhone4. 没有人质疑过苹果的iTunes+App的商业模式,App可谓如日中天.

web的演变

- 酿泉 - 前端观察
这是一个基于GAE的项目,有mgmt design、GOOD、Hyperakt和Vizzuality开发,也有Google chrome团队的参与,记录了浏览器与互联网技术的演变. 不多介绍,直接去看看吧:Evolution Of Web. 值得一提的是,这个项目的代码很不错,值得学习一下.

Web Service入门

- - 博客 - 伯乐在线
本文来自文章作者 @Jeremy黄国华 的投稿. 伯乐在线也欢迎其他朋友投稿,投稿时记得留下您的新浪微博账号哦~. 目前对Web Service没有统一的定义,定义一:Web Service是自包含的、模块化的应用程序,它可以在Web中被描述、发布、查找以及调用. 定义二:Web Service是基于网络的、分布式的模块化组件,它执行特定的任务,遵守具体的技术规范,这些规范使得Web Service能与其他兼任的组件进行操作.