在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入门教程(2) JS基础知识
Jan 31 Javascript
简略的前端架构心得&amp;&amp;基于editor为例子的编码小技巧
Nov 25 Javascript
Javascript面向对象编程(三) 非构造函数的继承
Aug 28 Javascript
JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍
Apr 03 Javascript
jQuery中size()方法用法实例
Dec 27 Javascript
详解JavaScript中数组的相关知识
Jul 29 Javascript
js判断手机号运营商的方法
Oct 23 Javascript
原生js实现图片层叠轮播切换效果
Feb 02 Javascript
原生js仿jquery实现对Ajax的封装
Oct 04 Javascript
微信小程序 动态绑定事件并实现事件修改样式
Apr 13 Javascript
在iFrame子页面里实现模态框的方法
Aug 17 Javascript
小程序瀑布流组件实现翻页与图片懒加载
May 19 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.ini中的php-5.2.0配置指令详解
2008/03/27 PHP
在PHP中设置、使用、删除Cookie的解决方法
2013/05/06 PHP
PHP使用ffmpeg给视频增加字幕显示的方法
2015/03/12 PHP
Jquery在IE7下无法使用 $.ajax解决方法
2009/11/11 Javascript
把input初始值不写value的具体实现方法
2013/07/04 Javascript
javascript的渐进增强与平稳退化浅谈
2013/11/12 Javascript
js获取对象为null的解决方法
2013/11/21 Javascript
js使用for循环与innerHTML获取选中tr下td值
2014/09/26 Javascript
JS实现光滑展开合拢的菜单效果代码
2015/09/16 Javascript
浅析JavaScript中的对象类型Object
2016/05/26 Javascript
JS模仿腾讯图片站的图片翻页按钮效果完整实例
2016/06/21 Javascript
Bootstrap图片轮播组件Carousel使用方法详解
2016/10/20 Javascript
bootstrap导航、选项卡实现代码
2016/12/28 Javascript
jQuery实现动态显示select下拉列表数据的方法
2018/02/05 jQuery
React中的refs的使用教程
2018/02/13 Javascript
微信小程序仿微信运动步数排行(交互)
2018/07/13 Javascript
微信小程序实现的3d轮播图效果示例【基于swiper组件】
2018/12/11 Javascript
vue实现分页加载效果
2019/12/24 Javascript
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
2020/06/19 Javascript
jQuery实现开关灯效果
2020/08/02 jQuery
[03:45]Newbee战队出征西雅图 决战2016国际邀请赛
2016/08/02 DOTA
[01:03:22]LGD vs OG 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
深入浅析python定时杀进程
2016/06/06 Python
对比Python中__getattr__和 __getattribute__获取属性的用法
2016/06/21 Python
python 字符串转列表 list 出现\ufeff的解决方法
2017/06/22 Python
Python使用Pandas库常见操作详解
2020/01/16 Python
Django中F函数的使用示例代码详解
2020/07/06 Python
html+css实现自定义图片上传按钮功能
2019/09/04 HTML / CSS
澳大利亚Mocha官方网站:包、钱包、珠宝和配饰
2019/07/18 全球购物
LACOSTE波兰官网:Polo衫、服装和鞋类
2020/09/29 全球购物
如何在.net Winform里面显示PDF文档
2012/09/11 面试题
好家长事迹材料
2014/01/23 职场文书
电气个人求职信范文
2014/02/04 职场文书
学校师德师风整改方案
2014/10/28 职场文书
员工2014年度工作总结
2014/12/09 职场文书
获奖感言范文
2015/07/31 职场文书