在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中巧用“闭包”实现程序的暂停执行功能
Apr 04 Javascript
Jquery模仿Baidu、Google搜索时自动补充搜索结果提示
Dec 26 Javascript
js Dialog 去掉右上角的X关闭功能
Apr 23 Javascript
jQuery使用after()方法在元素后面添加多项内容的方法
Mar 26 Javascript
超精准的javascript验证身份证号的具体实现方法
Nov 18 Javascript
jQuery绑定事件监听bind和移除事件监听unbind用法实例详解
Jan 19 Javascript
Bootstrap选项卡与Masonry插件的完美结合
Jul 06 Javascript
vue2实现搜索结果中的搜索关键字高亮的代码
Aug 29 Javascript
vue移动端下拉刷新和上拉加载的实现代码
Sep 08 Javascript
vue--点击当前增加class,其他删除class的方法
Sep 15 Javascript
vue+web端仿微信网页版聊天室功能
Apr 30 Javascript
微信小程序多列表渲染数据开关互不影响的实现
Jun 05 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数据流应用的简单例子
2012/06/01 PHP
Linux中用PHP判断程序运行状态的2个方法
2014/05/04 PHP
ThinkPHP中U方法的使用浅析
2014/06/13 PHP
php实现比较两个文件夹异同的方法
2015/06/18 PHP
教你在header中隐藏php的版本信息
2016/08/10 PHP
PHP内部实现打乱字符串顺序函数str_shuffle的方法
2019/02/14 PHP
HTML5如何适配 iPhone IOS 底部黑条
2021/03/09 HTML / CSS
Prototype Function对象 学习
2009/07/12 Javascript
jquery实现checkbox 全选/全不选的通用写法
2014/02/22 Javascript
关于onchange事件在IE和FF下的表现及解决方法
2014/03/08 Javascript
JQuery实现表格动态增加行并对新行添加事件
2014/07/30 Javascript
js的window.showModalDialog及window.open用法实例分析
2015/01/29 Javascript
使用jQuery制作浮动工具栏的实例分享
2016/05/13 Javascript
Jquery on方法绑定事件后执行多次的解决方法
2016/06/02 Javascript
jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)
2016/06/28 Javascript
JS自定义混合Mixin函数示例
2016/11/26 Javascript
JavaScript实现经典排序算法之插入排序
2016/12/28 Javascript
js实现一个猜数字游戏
2017/03/31 Javascript
nodejs服务搭建教程 nodejs访问本地站点文件
2017/04/07 NodeJs
javaScript中的空值和假值
2017/12/18 Javascript
vue-router3.0版本中 router.push 不能刷新页面的问题
2018/05/10 Javascript
基于Koa2写个脚手架模拟接口服务的方法
2018/11/27 Javascript
JS实现点击掉落特效
2021/01/29 Javascript
Python输出各行命令详解
2018/02/01 Python
python 读取修改pcap包的例子
2019/07/23 Python
python多线程同步实例教程
2019/08/11 Python
python框架django项目部署相关知识详解
2019/11/04 Python
python实现用户名密码校验
2020/03/18 Python
施华洛世奇美国官网:SWAROVSKI美国
2018/02/08 全球购物
程序员跳槽必看面试题总结
2013/06/28 面试题
资料员的岗位职责
2013/11/20 职场文书
倡议书格式模板
2014/05/13 职场文书
四风问题对照检查材料
2014/09/22 职场文书
导游词之河北邯郸
2019/09/12 职场文书
php 获取音视频时长,PHP 利用getid3 获取音频文件时长等数据
2021/04/01 PHP
python如何在word中存储本地图片
2021/04/07 Python