在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实现仿银行密码输入框效果的代码
Dec 13 Javascript
我的javascript 函数链之演变
Apr 07 Javascript
详解JavaScript中数组的reduce方法
Dec 02 Javascript
JavaScript实现的XML与JSON互转功能详解
Feb 16 Javascript
jQuery简易时光轴实现方法示例
Mar 13 Javascript
Linux CentOS系统下安装node.js与express的方法
Apr 01 Javascript
React入门教程之Hello World以及环境搭建详解
Jul 11 Javascript
js实现图片懒加载效果
Jul 17 Javascript
微信小程序对接七牛云存储的方法
Jul 30 Javascript
ES6新特性:使用export和import实现模块化详解
Jul 31 Javascript
vuejs实现折叠面板展开收缩动画效果
Sep 06 Javascript
web页面和微信小程序页面实现瀑布流效果
Sep 26 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
打造计数器DIY三步曲(中)
2006/10/09 PHP
PHP file_get_contents设置超时处理方法
2013/09/30 PHP
php页码形式分页函数支持静态化地址及ajax分页
2014/03/28 PHP
PHP fprintf()函数用法讲解
2019/02/16 PHP
VBScript版代码高亮
2006/06/26 Javascript
js动态添加表格数据使用insertRow和insertCell实现
2014/05/22 Javascript
纯javascript实现图片延时加载方法
2015/08/21 Javascript
javascript合并表格单元格实例代码
2016/01/03 Javascript
原生javascript+css3编写的3D魔方动画旋扭特效
2016/03/14 Javascript
jQuery增加、删除及修改select option的方法
2016/08/19 Javascript
Javascript中关于Array.filter()的妙用详解
2016/12/04 Javascript
微信小程序 两种滑动方式(横向滑动,竖向滑动)详细及实例代码
2017/01/13 Javascript
vue源码入口文件分析(推荐)
2018/01/30 Javascript
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
2018/10/12 Javascript
vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
2019/05/10 Javascript
基于Vue+ElementUI的省市区地址选择通用组件
2019/11/20 Javascript
js如何验证密码强度
2020/03/18 Javascript
微信小程序实现列表的横向滑动方式
2020/07/15 Javascript
Python中Django框架利用url来控制登录的方法
2015/07/25 Python
python删除某个字符
2018/03/19 Python
python放大图片和画方格实现算法
2018/03/30 Python
python自动登录12306并自动点击验证码完成登录的实现源代码
2018/04/25 Python
浅谈keras中的后端backend及其相关函数(K.prod,K.cast)
2020/06/29 Python
StubHub新加坡:购买和出售全球活动门票
2017/03/10 全球购物
英国领先的汽车轮胎和快速健康中心:Kwik Fit
2017/10/29 全球购物
意大利网上书店:LaFeltrinelli
2020/06/12 全球购物
专升本个人自我评价
2013/12/22 职场文书
大学生的网上创业计划书
2013/12/31 职场文书
大学军训感言
2014/01/10 职场文书
我的小天地教学反思
2014/04/30 职场文书
工作说明书范文
2014/05/07 职场文书
党支部对照检查材料
2014/08/25 职场文书
文言文辞职信
2015/02/28 职场文书
学生退学证明
2015/06/23 职场文书
vue使用节流函数的踩坑实例指南
2021/05/20 Vue.js
win10输入法不见了只能打出字母怎么解决?
2022/08/05 数码科技