在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实现的自定义的对话框的实现代码
Mar 21 Javascript
Jquery操作下拉框(DropDownList)实现取值赋值
Aug 13 Javascript
JavaScript实现两个Table固定表头根据页面大小自行调整
Jan 03 Javascript
JavaScript实现表格点击排序的方法
May 11 Javascript
详解基于angular路由的requireJs按需加载js
Jan 20 Javascript
AngularJS的ng-repeat指令与scope继承关系实例详解
Jan 21 Javascript
Javascript ES6中对象类型Sets的介绍与使用详解
Jul 17 Javascript
详解webpack+express多页站点开发
Dec 22 Javascript
vue.js 使用axios实现下载功能的示例
Mar 05 Javascript
angular-tree-component的使用详解
Jul 30 Javascript
jQuery实现鼠标移入移出事件切换功能示例
Sep 06 jQuery
Postman无法正常返回结果问题解决
Aug 28 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实现扎金花游戏之大小比赛的方法
2015/03/10 PHP
WordPress中Gravatar头像缓存到本地及相关优化的技巧
2015/12/19 PHP
使用php+swoole对client数据实时更新(一)
2016/01/07 PHP
php中用unset销毁变量并释放内存
2020/05/10 PHP
几个javascript操作word的参考代码
2009/10/26 Javascript
有趣的JavaScript数组长度问题代码说明
2011/01/20 Javascript
Draggable Elements 元素拖拽功能实现代码
2011/03/30 Javascript
checkbox使用示例
2013/08/23 Javascript
JavaScript中的this关键字使用详解
2015/08/14 Javascript
ajax跨域调用webservice的实现代码
2016/05/09 Javascript
jQuery页面弹出框实现文件上传
2017/02/09 Javascript
javascript设计模式之策略模式学习笔记
2017/02/15 Javascript
vue 表单输入格式化中文输入法异常问题
2018/05/30 Javascript
angular ng-model 无法获取值的处理方法
2018/10/02 Javascript
JS简单数组排序操作示例【sort方法】
2019/05/17 Javascript
js实现金山打字通小游戏
2020/07/24 Javascript
vue element-ui中table合计指定列求和实例
2020/11/02 Javascript
Python删除n行后的其他行方法
2019/01/28 Python
python实现UDP协议下的文件传输
2020/03/20 Python
CSS3中媒体查询结合rem布局适配手机屏幕
2019/06/10 HTML / CSS
兰蔻俄罗斯官方网站:Lancome俄罗斯
2019/12/09 全球购物
JSF面试题:Jsf中的核心类用那些?有什么作用?LiftCycle六大生命周期是什么?
2014/07/17 面试题
大学生实习鉴定评语
2014/04/25 职场文书
大型会议策划方案
2014/05/17 职场文书
关于保护环境的标语
2014/06/09 职场文书
大学生工作求职信
2014/06/23 职场文书
机电系毕业生求职信
2014/07/11 职场文书
建筑工程技术专业求职信
2014/07/16 职场文书
房产转让协议书(2014版)
2014/09/30 职场文书
2015年工会工作总结
2015/03/30 职场文书
2015年领导干部廉洁自律工作总结
2015/05/26 职场文书
《分数的意义》教学反思
2016/02/20 职场文书
python 解决微分方程的操作(数值解法)
2021/05/26 Python
5分钟教你docker安装启动redis全教程(全新方式)
2021/05/29 Redis
世界十大动漫制作公司排行榜,迪士尼上榜,第二是美国代表性文化符
2022/03/18 欧美动漫
MySQL如何修改字段类型和字段长度
2022/06/10 MySQL