在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 word表格动态添加代码
Jun 07 Javascript
js中的setInterval和setTimeout使用实例
May 09 Javascript
JavaScript实现twitter puddles算法实例
Dec 06 Javascript
JavaScript监听文本框回车事件并过滤文本框空格的方法
Apr 16 Javascript
基于jQuery实现的旋转彩圈实例
Jun 26 Javascript
前端构建工具之gulp的配置与搭建详解
Jun 12 Javascript
vue使用高德地图点击下钻上浮效果的实现思路
Oct 12 Javascript
解决vue项目F5刷新mounted里的函数不执行问题
Nov 05 Javascript
使用preload预加载页面资源时注意事项
Feb 03 Javascript
js cavans实现静态滚动弹幕
May 21 Javascript
vue.js 解决v-model让select默认选中不生效的问题
Jul 28 Javascript
JavaScript中Object、map、weakmap的区别分析
Dec 15 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-redis中的sort排序函数总结
2015/07/08 PHP
ThinkPHP中limit()使用方法详解
2016/04/19 PHP
PHP使用两个栈实现队列功能的方法
2018/01/15 PHP
PHP从尾到头打印链表实例讲解
2018/09/27 PHP
Laravel框架运行出错提示RuntimeException No application encryption key has been specified.解决方法
2019/04/02 PHP
Yii框架应用组件用法实例分析
2020/05/15 PHP
Jquery练习之表单验证实现代码
2010/12/14 Javascript
jquery 层次选择器siblings与nextAll的区别介绍
2013/08/02 Javascript
判断js对象是否拥有某一个属性的js代码
2013/08/16 Javascript
9行javascript代码获取QQ群成员具体实现
2013/10/16 Javascript
javascript操作字符串的原生方法
2014/12/22 Javascript
JavaScript控制图片加载完成后调用回调函数的方法
2015/03/20 Javascript
JS实现自定义简单网页软键盘效果代码
2015/11/05 Javascript
vue-cli开发时,关于ajax跨域的解决方法(推荐)
2018/02/03 Javascript
基于jQuery实现的设置文本区域的光标位置
2018/06/15 jQuery
JavaScript实现学生在线做题计时器功能
2018/12/05 Javascript
简单了解vue中父子组件如何相互传递值(基础向)
2019/07/12 Javascript
js滚轮事件 js自定义滚动条的实现
2020/01/18 Javascript
vue3.0 的 Composition API 的使用示例
2020/10/26 Javascript
[55:44]完美世界DOTA2联赛决赛 FTD vs Phoenix 第二场 11.08
2020/11/11 DOTA
python提取内容关键词的方法
2015/03/16 Python
Python利用字典将两个通讯录文本合并为一个文本实例
2018/01/16 Python
python操作redis方法总结
2018/06/06 Python
python画一个玫瑰和一个爱心
2020/08/18 Python
Python动态参数/命名空间/函数嵌套/global和nonlocal
2019/05/29 Python
Python批量查询关键词微信指数实例方法
2019/06/27 Python
python图形用户接口实例详解
2019/12/16 Python
Python 序列化和反序列化库 MarshMallow 的用法实例代码
2020/02/25 Python
深入了解Python 变量作用域
2020/07/24 Python
详解快速开发基于 HTML5 网络拓扑图应用
2018/01/08 HTML / CSS
行政文员岗位职责
2013/11/08 职场文书
警示教育观后感
2015/06/17 职场文书
2015领导干部廉洁自律工作总结
2015/07/23 职场文书
企业年会祝酒词
2015/08/11 职场文书
2019年入党思想汇报格式与要求
2019/06/25 职场文书
Java 深入探究讲解简单工厂模式
2022/04/07 Java/Android