在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 相关文章推荐
jQuery之尺寸调整组件的深入解析
Jun 19 Javascript
jQuery仿gmail实现fixed布局的方法
May 27 Javascript
微信小程序 获取当前地理位置和经纬度实例代码
Dec 05 Javascript
手把手教你用Node.js爬虫爬取网站数据的方法
Jul 05 Javascript
解决JavaScript layui 下拉框不显示的问题
Aug 14 Javascript
vue操作下拉选择器获取选择的数据的id方法
Aug 24 Javascript
vue数据初始化initState的实例详解
Apr 11 Javascript
Flutter实现仿微信底部菜单栏功能
Sep 18 Javascript
JavaScript函数IIFE使用详解
Oct 21 Javascript
从0搭建vue-cli4脚手架
Jun 17 Javascript
vue监听滚动事件的方法
Dec 21 Vue.js
js实现随机点名功能
Dec 23 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
乐信RP2100的电路分析和打磨
2021/03/02 无线电
新手配置 PHP 调试环境(IIS+PHP+MYSQL)
2007/01/10 PHP
PHP学习笔记之一
2011/01/17 PHP
大家在抢红包,程序员在研究红包算法
2015/08/31 PHP
tp框架(thinkPHP)实现三次登陆密码错误之后锁定账号功能示例
2018/05/24 PHP
Centos7.7 64位利用本地完整安装包安装lnmp/lamp套件教程
2021/03/09 Servers
select标记美化--JS式插件、后期加载
2013/04/01 Javascript
jQuery中attr()和prop()在修改checked属性时的区别
2014/07/18 Javascript
Jquery弹出层插件ThickBox的使用方法
2014/12/09 Javascript
js实现感应鼠标图片透明度变化的方法
2015/02/20 Javascript
AngularJS 工作原理详解
2016/08/18 Javascript
浅谈Node.js轻量级Web框架Express4.x使用指南
2017/05/03 Javascript
BootStrap daterangepicker 双日历控件
2017/06/02 Javascript
使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
2018/03/22 Javascript
javascript 关于赋值、浅拷贝、深拷贝的个人理解
2019/11/01 Javascript
vue+iview实现文件上传
2020/11/17 Vue.js
python实现的登陆Discuz!论坛通用代码分享
2014/07/11 Python
简单介绍Python2.x版本中的cmp()方法的使用
2015/05/20 Python
Pandas 数据框增、删、改、查、去重、抽样基本操作方法
2018/04/12 Python
Python开发之Nginx+uWSGI+virtualenv多项目部署教程
2019/05/13 Python
python爬虫租房信息在地图上显示的方法
2019/05/13 Python
python框架Django实战商城项目之工程搭建过程图文详解
2020/03/09 Python
python3中sys.argv的实例用法
2020/04/24 Python
使用opencv识别图像红色区域,并输出红色区域中心点坐标
2020/06/02 Python
解决python运行效率不高的问题
2020/07/20 Python
Python模块zipfile原理及使用方法详解
2020/08/04 Python
Python+logging输出到屏幕将log日志写入文件
2020/11/11 Python
2014年秋季新学期寄语
2014/08/02 职场文书
民族团结好少年事迹材料
2014/08/19 职场文书
见习期个人总结
2015/03/05 职场文书
公司停电通知
2015/04/15 职场文书
2015年党员岗位承诺书
2015/04/27 职场文书
2016年员工政治思想表现评语
2015/12/02 职场文书
Vue的生命周期一起来看看
2022/02/24 Vue.js
React四级菜单的实现
2022/04/08 Javascript
Mysql 文件配置解析介绍
2022/05/06 MySQL