在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 相关文章推荐
一组JS创建和操作表格的函数集合
May 07 Javascript
JavaScript中SQL语句的应用实现
May 04 Javascript
JavaScript实现网页截图功能
Oct 16 Javascript
javascript手工制作悬浮菜单
Feb 12 Javascript
JavaScript定时显示广告代码分享
Mar 02 Javascript
javascript鼠标右键菜单自定义效果
Dec 08 Javascript
jQuery xml字符串的解析、读取及查找方法
Mar 01 Javascript
js基于cookie方式记住返回页面用法示例
May 27 Javascript
jQuery实现点击下拉框中的值累加到文本框中的方法示例
Oct 28 jQuery
vue 插值 v-once,v-text, v-html详解
Jan 19 Javascript
js中如何完美的解析数据
Mar 18 Javascript
Vue使用JSEncrypt实现rsa加密及挂载方法
Feb 07 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
7个超级实用的PHP代码片段
2011/07/11 PHP
php数组函数序列之array_pop() - 删除数组中的最后一个元素
2011/11/07 PHP
PHP简单实现循环链表功能示例
2017/11/10 PHP
PHP实现新型冠状病毒疫情实时图的实例
2020/02/04 PHP
javascript操作cookie的文章(设置,删除cookies)
2010/04/01 Javascript
JQuery中getJSON的使用方法
2010/12/13 Javascript
jquery实现加载等待效果示例
2013/09/25 Javascript
js如何设置在iframe框架中指定div不显示
2013/12/04 Javascript
WebApi+Bootstrap+KnockoutJs打造单页面程序
2016/05/16 Javascript
检查表单元素的值是否为空的实例代码
2016/06/16 Javascript
JS 在数组指定位置插入/删除数据的方法
2017/01/12 Javascript
jQuery快速高效制作网页交互特效
2017/02/24 Javascript
Vue中的v-cloak使用解读
2017/03/27 Javascript
vue.js整合vux中的上拉加载下拉刷新实例教程
2018/01/09 Javascript
vue devtools的安装与使用教程
2018/08/08 Javascript
vue添加axios,并且指定baseurl的方法
2018/09/19 Javascript
vue基础之使用get、post、jsonp实现交互功能示例
2019/03/12 Javascript
[56:18]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#2 MVP.Phx VS Fnatic第二局
2016/03/05 DOTA
[00:32]2018DOTA2亚洲邀请赛VGJ.T出场
2018/04/03 DOTA
[44:50]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 TNC vs VG
2018/04/02 DOTA
Python中的字典与成员运算符初步探究
2015/10/13 Python
python爬取m3u8连接的视频
2018/02/28 Python
python批量从es取数据的方法(文档数超过10000)
2018/12/27 Python
Python文件读写常见用法总结
2019/02/22 Python
python bluetooth蓝牙信息获取蓝牙设备类型的方法
2019/11/29 Python
python dataframe NaN处理方式
2019/12/26 Python
python json.dumps中文乱码问题解决
2020/04/01 Python
Django搭建项目实战与避坑细节详解
2020/12/06 Python
Madewell美德威尔美国官网:美国休闲服饰品牌
2016/11/25 全球购物
Europcar比利时:租车
2019/08/26 全球购物
电气专业推荐信范文
2013/11/18 职场文书
八年级语文教学反思
2014/02/11 职场文书
正科级干部考察材料
2014/05/29 职场文书
Python import模块的缓存问题解决方案
2021/06/02 Python
详解Java实践之适配器模式
2021/06/18 Java/Android
javascript中Set、Map、WeakSet、WeakMap区别
2022/12/24 Javascript