在JavaScript中使用timer示例


Posted in Javascript onMay 08, 2014
function foo() 
{ 
} 
setInterval( "foo()", 1000 );

如果使用OO的技术,可以这样,
// constructor 
function MyObj 
{ 
function foo() 
{ 
alert( this.data ); 
} this.timer = foo; 
this.data = "Hello"; 
setInterval( "this.timer()", 1000 ); 
} 
function Another() 
{ 
// create timer when create object 
var obj = new MyObj(); 
}

但是,它并不能像你想像的那样工作。原因在于setInterval()这个函数并不能识别this这个变量。一个workaround 的方法可以这样。
function Another() 
{ 
var obj = nw MyObj(); 
setInterval( “obj.timer()”, 1000 ); 
}

显然,它可以正确工作,但如果你是一个完美主义者,你就不会对它满意。幸运的是,可以将这个动作放到构造函数中去,形式上有点变化。
// constructor 
function MyObj 
{ 
function foo() 
{ 
alert( this.data ); 
} this.timer = foo; 
this.data = "Hello"; 
var self = this; 
setInterval( function() { self.timer(); }, 1000 ); 
} 
function Another() 
{ 
var obj = new MyObj(); 
}

OK, 通过使用一个闭包,就可以了。至于其中的原因,我想给读者自己去思考。

最后,给一个各种测试case的例子。

<html> 
<head> 
<title> 
Hello Timer 
</title> 
<script language = "JScript"> /* 
* There are 3 classes. 
* 
* 1. timer can run and result is ok 
* 2. timer can run and result is wrong 
* 3. timer can not run 
* 
*/ 
function Obj() 
{ 
function foo() 
{ 
alert( this.timer ); 
} 
this.timer = foo; 
// 
var me = this; 
var f = function() { me.timer(); }; 
var f2 = function() { this.timer(); }; 
// 1st class 
//setInterval( f, 1000 ); 
// 3rd class 
//setInterval( f2, 1000 ); 
// 2nd class 
//setInterval( me.timer, 1000 ); 
//setInterval( this.timer, 1000 ); 
//setInterval( foo, 1000 ); 
// 3rd class 
//setInterval( "this.timer()", 1000 ); 
//setInterval( "me.timer()", 1000 ); 
//setInterval( "foo()", 1000 ); 
} 
var o = null; 
function OnClick() 
{ 
o = new Obj(); 
// 1st class 
//setInterval( "o.timer()", 1000 ); 
setInterval( function() { o.timer(); }, 1000 ); 
// 2nd class 
//setInterval( o.timer, 1000 ); 
} 
</script> 
</head> 
<body> 
<input type = "button" onclick = "OnClick()" value = "Click me"></input> 
</body> 
</html>
Javascript 相关文章推荐
JavaScript 无符号右移赋值操作
Apr 17 Javascript
JavaScript AJAX之惰性载入函数
Aug 27 Javascript
node.js中的http.response.getHeader方法使用说明
Dec 14 Javascript
javaScript事件机制兼容【详细整理】
Jul 23 Javascript
基于JavaScript实现图片剪切效果
Mar 07 Javascript
详解RequireJS按需加载样式文件
Apr 12 Javascript
JavaScript累加、迭代、穷举、递归等常用算法实例小结
May 08 Javascript
vue中keep-alive的用法及问题描述
May 15 Javascript
Vue传参一箩筐(页面、组件)
Apr 04 Javascript
Vue.js 实现地址管理页面思路详解(地址添加、编辑、删除和设置默认地址)
Dec 11 Javascript
javascript-hashchange事件和历史状态管理实例分析
Apr 18 Javascript
解决vue请求接口第一次成功,第二次失败问题
Sep 08 Javascript
JavaScript中读取和保存文件实例
May 08 #Javascript
ExtJS中设置下拉列表框不可编辑的方法
May 07 #Javascript
jquery 显示*天*时*分*秒实现时间计时器
May 07 #Javascript
解决jQuery动态获取手机屏幕高和宽的问题
May 07 #Javascript
addEventListener 的用法示例介绍
May 07 #Javascript
jquery通过select列表选择框对表格数据进行过滤示例
May 07 #Javascript
关闭时刷新父窗口两种方法
May 07 #Javascript
You might like
php 操作excel文件的方法小结
2009/12/31 PHP
PHP设计模式之观察者模式(Observer)详细介绍和代码实例
2014/04/08 PHP
php显示时间常用方法小结
2015/06/05 PHP
py文件转exe时包含paramiko模块出错解决方法
2016/08/12 PHP
js判断浏览器的比较全的代码
2007/02/13 Javascript
很多人都是用下面的js刷新站IP和PV
2008/09/05 Javascript
Mootools 1.2教程 类(一)
2009/09/15 Javascript
一个JavaScript获取元素当前高度的实例
2014/10/29 Javascript
javascript实现图片循环渐显播放的方法
2015/02/24 Javascript
js 右侧浮动层效果实现代码(跟随滚动)
2015/11/22 Javascript
jQuery代码实现对话框右上角菜单带关闭×
2016/05/03 Javascript
微信小程序 label 组件详解及简单实例
2017/01/10 Javascript
nodejs批量下载图片的实现方法
2017/05/19 NodeJs
如何实现小程序tab栏下划线动画效果
2019/05/18 Javascript
nodejs环境使用Typeorm连接查询Oracle数据
2019/12/05 NodeJs
VUE-ElementUI 自定义Loading图操作
2020/11/11 Javascript
Python通过PIL获取图片主要颜色并和颜色库进行对比的方法
2015/03/19 Python
在Python的web框架中中编写日志列表的教程
2015/04/30 Python
深入探究Python中变量的拷贝和作用域问题
2015/05/05 Python
详解Python中expandtabs()方法的使用
2015/05/18 Python
详细介绍Python的鸭子类型
2016/09/12 Python
用python做一个搜索引擎(Pylucene)的实例代码
2017/07/05 Python
Python SqlAlchemy动态添加数据表字段实例解析
2018/02/07 Python
python实现数独游戏 java简单实现数独游戏
2018/03/30 Python
Python脚本完成post接口测试的实例
2018/12/17 Python
Python如何将图像音视频等资源文件隐藏在代码中(小技巧)
2020/02/16 Python
Python中实现输入一个整数的案例
2020/05/03 Python
Python getsizeof()和getsize()区分详解
2020/11/20 Python
全球领先的各类汽车配件零售商:Advance Auto Parts
2016/08/26 全球购物
你对IPv6了解程度
2016/02/09 面试题
在c#中using和new这两个关键字有什么意义
2013/05/19 面试题
博士学位自我鉴定范文
2013/12/26 职场文书
模具数控专业自荐信
2014/01/27 职场文书
献爱心活动总结
2014/05/07 职场文书
银行开户授权委托书格式
2014/10/10 职场文书
JavaScript 实现页面滚动动画
2021/04/24 Javascript