在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 相关文章推荐
在你的网页中嵌入外部网页的方法
Apr 02 Javascript
prototype Element学习笔记(篇一)
Oct 26 Javascript
javascript 检测浏览器类型和版本的代码
Sep 15 Javascript
innerHTML 和 getElementsByName 在IE下面的bug 的解决
Apr 09 Javascript
JS中数组Array的用法示例介绍
Feb 20 Javascript
jQuery插件MixItUp实现动画过滤和排序
Apr 12 Javascript
在Node.js应用中读写Redis数据库的简单方法
Jun 30 Javascript
jquery form表单获取内容以及绑定数据
Feb 24 Javascript
js监听键盘事件的方法_原生和jquery的区别详解
Oct 10 Javascript
详解react内联样式使用webpack将px转rem
Sep 13 Javascript
详解小程序不同页面之间通讯的解决方案
Nov 23 Javascript
使用Ajax实现无刷新上传文件
Apr 12 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扩展编写点滴 技巧收集
2010/03/09 PHP
第六章 php目录与文件操作
2011/12/30 PHP
php数据库备份还原类分享
2014/03/20 PHP
PHP入门之常量简介和系统常量
2014/05/12 PHP
PHP遍历数组的三种方法及效率对比分析
2015/02/12 PHP
php中memcache 基本操作实例
2015/05/17 PHP
php显示页码分页类的封装
2017/06/08 PHP
由prototype_1.3.1进入javascript殿堂-类的初探
2006/11/06 Javascript
ext实现完整的登录代码
2008/08/08 Javascript
本地图片预览(支持IE6/IE7/IE8/Firefox3)经验总结
2013/03/25 Javascript
js substring从右边获取指定长度字符串(示例代码)
2013/12/23 Javascript
JavaScript跨平台的开源框架NativeScript
2015/03/24 Javascript
详解Nodejs的timers模块
2016/12/22 NodeJs
JavaScript实现经典排序算法之插入排序
2016/12/28 Javascript
Angular1.x复杂指令实例详解
2017/03/01 Javascript
理解 Node.js 事件驱动机制的原理
2017/08/16 Javascript
Vue2.0用 watch 观察 prop 变化(不触发)
2017/09/08 Javascript
Element input树型下拉框的实现代码
2018/12/21 Javascript
浅析JavaScript异步代码优化
2019/03/18 Javascript
angular6开发steps步骤条组件
2019/07/04 Javascript
详解webpack-dev-middleware 源码解读
2020/03/23 Javascript
vue-列表下详情的展开与折叠案例
2020/07/28 Javascript
vue 实现一个简单的全局调用弹窗案例
2020/09/10 Javascript
Ant Design Pro 之 ProTable使用操作
2020/10/31 Javascript
python使用urllib2模块获取gravatar头像实例
2013/12/18 Python
对python中字典keys,values,items的使用详解
2019/02/03 Python
python实现微信防撤回神器
2019/04/29 Python
使用python自动追踪你的快递(物流推送邮箱)
2020/03/17 Python
python解包用法详解
2021/02/17 Python
Html5之svg可缩放矢量图形_动力节点Java学院整理
2017/07/17 HTML / CSS
小摄影师教学反思
2014/04/27 职场文书
开展读书活动总结
2014/06/30 职场文书
三下乡个人总结
2015/03/04 职场文书
2015年打非治违工作总结
2015/04/02 职场文书
财务稽核岗位职责
2015/04/13 职场文书
如何基于python实现单目三维重建详解
2022/06/25 Python