在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 相关文章推荐
js获得网页背景色和字体色的方法
Mar 21 Javascript
js 动态为textbox添加下拉框数据源的方法
Apr 24 Javascript
Jquery实现仿腾讯微博发表广播
Nov 17 Javascript
四种参数传递的形式——URL,超链接,js,form表单
Jul 24 Javascript
快速解决Canvas.toDataURL 图片跨域的问题
May 10 Javascript
批量下载对路网图片并生成html的实现方法
Jun 07 Javascript
BootStrap 智能表单实战系列(十)自动完成组件的支持
Jun 13 Javascript
JavaScript实现的商品抢购倒计时功能示例
Apr 17 Javascript
详细分析单线程JS执行问题
Nov 22 Javascript
分析JS中this引发的bug
Dec 12 Javascript
简单的Vue异步组件实例Demo
Dec 27 Javascript
小程序实现留言板
Nov 02 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
这部好评如潮的动漫 知名梗频出 但是画风劝退很多人
2020/03/08 日漫
咖啡磨器 如何选购一台适合家用的意式磨豆机
2021/03/05 新手入门
php smarty 二级分类代码和模版循环例子
2011/06/01 PHP
在win7中搭建Linux+PHP 开发环境
2014/10/08 PHP
thinkPHP框架对接支付宝即时到账接口回调操作示例
2016/11/14 PHP
Javascript调用XML制作连动下拉列表框
2006/06/25 Javascript
获取HTML DOM节点元素的方法的总结
2009/08/21 Javascript
js获取单元格自定义属性值的代码(IE/Firefox)
2010/04/05 Javascript
JAVASCRIPT实现的WEB页面跳转以及页面间传值方法
2010/05/13 Javascript
Js日期选择器并自动加入到输入框中示例代码
2013/08/02 Javascript
iframe如何动态创建及释放其所占内存
2014/09/03 Javascript
Node.js之网络通讯模块实现浅析
2017/04/01 Javascript
基于jQuery的左滑出现删除按钮的示例
2017/08/29 jQuery
Angular中使用MathJax遇到的一些问题
2017/12/15 Javascript
js 实现复选框只能选择一项的示例代码
2018/01/23 Javascript
vue2.0自定义指令示例代码详解
2019/04/25 Javascript
微信小程序引入Vant组件库过程解析
2019/08/06 Javascript
微信小程序自定义tabbar custom-tab-bar 6s出不来解决方案(cover-view不兼容)
2019/11/01 Javascript
如何在Express4.x中愉快地使用async的方法
2020/11/18 Javascript
Python 探针的实现原理
2016/04/23 Python
Python xlwt设置excel单元格字体及格式
2020/04/18 Python
Python:Scrapy框架中Item Pipeline组件使用详解
2017/12/27 Python
解决python读取几千万行的大表内存问题
2018/06/26 Python
Python爬取商家联系电话以及各种数据的方法
2018/11/10 Python
mac系统下Redis安装和使用步骤详解
2019/07/09 Python
pytorch简介
2020/11/11 Python
HTML5实现分享到微信好友朋友圈QQ好友QQ空间微博二维码功能
2018/01/03 HTML / CSS
意大利和国际奢侈品牌购物网站:Suitnegozi.com
2021/01/15 全球购物
音乐专业应届生教师求职信
2013/11/04 职场文书
思想汇报范文
2013/11/04 职场文书
竞聘上岗演讲稿范文
2014/01/10 职场文书
韩语专业职业生涯规划范文:成功之路就在我们脚下
2014/09/11 职场文书
三严三实对照检查材料
2014/09/22 职场文书
学校感恩节活动策划方案
2014/10/06 职场文书
监护人证明
2015/06/19 职场文书
Nginx URL重写rewrite机制原理及使用实例
2021/04/01 Servers