在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 相关文章推荐
自动更新作用
Oct 08 Javascript
老鱼 浅谈javascript面向对象编程
Mar 04 Javascript
js库Modernizr的介绍和使用
May 07 Javascript
jquery实现界面无刷新加载登陆注册
Jul 30 Javascript
基于jQuery实现弹幕APP
Feb 10 Javascript
vue实现全选、反选功能
Nov 17 Javascript
JavaScript之underscore_动力节点Java学院整理
Jul 03 Javascript
Node.js readline模块与util模块的使用
Mar 01 Javascript
[原创]jquery判断元素内容是否为空的方法
May 04 jQuery
jQuery动态操作表单示例【基于table表格】
Dec 06 jQuery
vue.js 打包时出现空白页和路径错误问题及解决方法
Jun 26 Javascript
微信小程序wx.navigateTo方法里的events参数使用详情及场景
Jan 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
玩转虚拟域名◎+ .
2006/10/09 PHP
PHP中的array数组类型分析说明
2010/07/27 PHP
php实现简单文件下载的方法
2015/01/30 PHP
php简单实现多语言切换的方法
2016/05/09 PHP
详解PHP队列的实现
2019/03/14 PHP
JS去除字符串的空格增强版(可以去除中间的空格)
2009/08/26 Javascript
jquery实现兼容浏览器的图片上传本地预览功能
2013/10/14 Javascript
js拖拽一些常见的思路方法整理
2014/03/19 Javascript
JavaScript设计模式之工厂模式和构造器模式
2015/02/11 Javascript
AngularJS基础学习笔记之指令
2015/05/10 Javascript
Centos7 中安装 Node.js v4.4.4
2016/11/03 Javascript
JavaScript获取服务器时间的方法详解
2016/12/11 Javascript
JS求解三元一次方程组值的方法
2017/01/03 Javascript
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
2017/07/08 jQuery
Angular实现的日程表功能【可添加及隐藏显示内容】
2017/12/27 Javascript
JS数组中对象去重操作示例
2019/06/04 Javascript
JS实现继承的几种常用方式示例
2019/06/22 Javascript
Python实现国外赌场热门游戏Craps(双骰子)
2015/03/31 Python
python字典的常用操作方法小结
2016/05/16 Python
python装饰器初探(推荐)
2016/07/21 Python
Pycharm取消py脚本中SQL识别的方法
2018/11/29 Python
在Pycharm中执行scrapy命令的方法
2019/01/16 Python
在Python中居然可以定义两个同名通参数的函数
2019/01/31 Python
Python实现微信机器人的方法
2019/09/06 Python
matlab、python中矩阵的互相导入导出方式
2020/06/01 Python
俄罗斯玩具、儿童用品、儿童服装和鞋子网上商店:MyToys.ru
2019/10/14 全球购物
《最可爱的人》教学反思
2014/02/14 职场文书
小学趣味运动会加油稿
2014/09/25 职场文书
大学生党员自我剖析材料
2014/10/06 职场文书
2015年教研工作总结
2015/05/23 职场文书
升学宴来宾致辞
2015/07/27 职场文书
分享15个Webpack实用的插件!!!
2021/03/31 Javascript
JavaScript实现简单计时器
2021/06/22 Javascript
MySQL系列之十五 MySQL常用配置和性能压力测试
2021/07/02 MySQL
MySQL里面的子查询的基本使用
2021/08/02 MySQL
golang定时器
2022/04/14 Golang