在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 相关文章推荐
下载网站打开页面后间隔多少时间才显示下载链接地址的代码
Apr 25 Javascript
jQuery获取文本节点之 text()/val()/html() 方法区别
Mar 01 Javascript
写自已的js类库需要的核心代码
Jul 16 Javascript
node.js使用nodemailer发送邮件实例
Mar 10 Javascript
jquery实现通用版鼠标经过淡入淡出效果
Jun 15 Javascript
容易造成JavaScript内存泄露几个方面
Sep 04 Javascript
js函数与php函数的区别实例浅析
Jan 12 Javascript
JavaScript的jQuery库插件的简要开发指南
Aug 12 Javascript
基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载(一)
Jun 22 Javascript
webpack 从指定入口文件中提取公共文件的方法
Nov 13 Javascript
微信小程序的注册页面包含倒计时验证码、获取用户信息
May 22 Javascript
解决Antd Table表头加Icon和气泡提示的坑
Nov 17 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自动识别字符集并完成转码详解
2013/08/02 PHP
Zend Framework实现具有基本功能的留言本(附demo源码下载)
2016/03/22 PHP
php根据年月获取当月天数及日期数组的方法
2016/11/30 PHP
php微信公众平台开发(一) 配置接口
2016/12/06 PHP
使用jQuery避免鼠标双击的解决方案
2013/08/21 Javascript
jquery基础教程之deferred对象使用方法
2014/01/22 Javascript
javascript中attribute和property的区别详解
2014/06/05 Javascript
js实现按Ctrl+Enter发送效果
2014/09/18 Javascript
javascript制作坦克大战全纪录(1)
2014/11/27 Javascript
js类式继承与原型式继承详解
2016/04/07 Javascript
Bootstrap富文本组件wysiwyg数据保存到mysql的方法
2016/05/09 Javascript
ionic隐藏tabs的方法
2016/08/29 Javascript
浅谈jQuery操作类数组的工具方法
2016/12/23 Javascript
nodejs个人博客开发第六步 数据分页
2017/04/12 NodeJs
js下拉菜单生成器dropMenu使用方法详解
2017/08/01 Javascript
关于meta viewport中target-densitydpi属性详解(推荐)
2017/08/18 Javascript
vue全局使用axios的方法实例详解
2018/11/22 Javascript
微信小程序常见页面跳转操作简单示例
2019/05/01 Javascript
基于vue如何发布一个npm包的方法步骤
2019/05/15 Javascript
layui table去掉右侧滑动条的实现方法
2019/09/05 Javascript
浅谈laytpl 模板空值显示null的解决方法及简单的js表达式
2019/09/19 Javascript
[01:49]一目了然!DOTA2DotA快捷操作对比第二弹
2014/05/16 DOTA
python实现多张图片拼接成大图
2019/01/15 Python
简单分析python的类变量、实例变量
2019/08/23 Python
对python中的*args与**kwgs的含义与作用详解
2019/08/28 Python
django 实现手动存储文件到model的FileField
2020/03/30 Python
使用 django orm 写 exists 条件过滤实例
2020/05/20 Python
python os模块常用的29种方法使用详解
2020/06/02 Python
求职信写作要突出重点
2014/01/01 职场文书
计算机专业职业生涯规划范文
2014/01/19 职场文书
教师党员承诺书
2014/03/25 职场文书
查摆问题自查报告范文
2014/10/13 职场文书
2014年人民调解工作总结
2014/12/08 职场文书
涨价通知
2015/04/23 职场文书
2015年教育实习工作总结
2015/04/24 职场文书
python中print格式化输出的问题
2021/04/16 Python