在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提取元素里的纯文本不包含span等里的内容
Sep 30 Javascript
node.js实现BigPipe详解
Dec 05 Javascript
基于JS实现新闻列表无缝向上滚动实例代码
Jan 22 Javascript
详解Javascript继承的实现
Mar 25 Javascript
babel的使用及安装配置教程
Feb 22 Javascript
在vue中,v-for的索引index在html中的使用方法
Mar 06 Javascript
详解Vue webapp项目通过HBulider打包原生APP(vue+webpack+HBulider)
Feb 02 Javascript
微信小程序实现用table显示数据库反馈的多条数据功能示例
May 07 Javascript
vue2 拖动排序 vuedraggable组件的实现
Aug 08 Javascript
微信小程序文章列表功能完整实例
Jun 03 Javascript
详解在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入)
Jul 11 Javascript
JS数组方法some、every和find的使用详情
Oct 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的array数组和使用实例简明教程(容易理解)
2014/03/20 PHP
php日期操作技巧小结
2016/06/25 PHP
一个对于Array的简单扩展
2006/10/03 Javascript
对象的类型:本地对象(1)
2006/12/29 Javascript
javascript 复杂的嵌套环境中输出单引号和双引号
2009/05/26 Javascript
用jQuery中的ajax分页实现代码
2011/09/20 Javascript
浅析javascript中函数声明和函数表达式的区别
2015/02/15 Javascript
JavaScript中length属性的使用方法
2015/06/05 Javascript
javascript简单实现类似QQ头像弹出效果的方法
2015/08/03 Javascript
js 判断一组日期是否是连续的简单实例
2016/07/11 Javascript
jQuery树形插件jquery.simpleTree.js用法分析
2016/09/05 Javascript
javascript实现根据汉字获取简拼
2016/09/25 Javascript
smartupload实现文件上传时获取表单数据(推荐)
2016/12/12 Javascript
jQuery实现获取隐藏div高度的方法示例
2017/02/09 Javascript
基于JavaScript实现贪吃蛇游戏
2020/03/16 Javascript
vue使用keep-alive实现组件切换时保存原组件数据方法
2020/10/30 Javascript
vue在图片上传的时候压缩图片
2020/11/18 Vue.js
[42:32]完美世界DOTA2联赛循环赛 Magma vs PXG BO2第二场 10.28
2020/10/28 DOTA
在Python的web框架中配置app的教程
2015/04/30 Python
尝试使用Python多线程抓取代理服务器IP地址的示例
2015/11/09 Python
Python面向对象之继承代码详解
2018/01/29 Python
python+opencv实现高斯平滑滤波
2020/07/21 Python
Python3.5基础之变量、数据结构、条件和循环语句、break与continue语句实例详解
2019/04/26 Python
Python 3.8新特征之asyncio REPL
2019/05/28 Python
Python Web框架之Django框架文件上传功能详解
2019/08/16 Python
python3.8.3安装教程及环境配置的详细教程(64-bit)
2020/11/28 Python
浅析python连接数据库的重要事项
2021/02/22 Python
环保公益广告语
2014/03/13 职场文书
学习雷锋演讲稿
2014/05/10 职场文书
小学课外阅读总结
2014/07/09 职场文书
邓小平理论心得体会
2014/09/09 职场文书
2014年村支部书记四风对照检查材料思想汇报
2014/10/02 职场文书
2016大学生党校学习心得体会
2016/01/06 职场文书
安全责任协议书范本
2016/03/23 职场文书
浅谈Python响应式类库RxPy
2021/06/14 Python
vue实现书本翻页动画效果实例详解
2022/04/08 Vue.js