在JavaScript中使用timer示例

代码如下:

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>

赞 (0)

相关推荐

  • 在JavaScript中使用timer示例

    复制代码 代码如下: function foo() { } setInterval( "foo()", 1000 ); 如果使用OO的技术,可以这样, 复制代码 代码如下: // constructor function MyObj { function foo() { alert( this.data ); } this.timer = foo; this.data = "Hello"; setInterval( "this.timer()",

  • JavaScript中return用法示例

    本文实例讲述了JavaScript中return用法.分享给大家供大家参考,具体如下: return可以接受函数中的返回值,前提是函数中要有return语句. 下面是一个应用小示例: <html> <head> <script type='text/javascript'> function linkPage(){ alert('You Clicked??'); return false; } </script> </head> <body

  • JavaScript中的FileReader示例详解

    JavaScript中的FileReader示例详解

    目录 前言: input:file FileReader 补充:一个比较全面的例子 总结 前言: FileReader是一种异步文件读取机制,结合input:file可以很方便的读取本地文件. input:file 在介绍FileReader之前,先简单介绍input的file类型. <input type="file" id="file"> input的file类型会渲染为一个按钮和一段文字.点击按钮可打开文件选择窗口,文字表示对文件的描述(大部分情况

  • 在JavaScript中构建ArrayList示例代码

    在JavaScript中构建ArrayList示例代码

    前面我们介绍了JavaScript Array 的API,在JavaScript 中 数组 本身就非常强大,可以存储任意类型,且长度自动扩容,又提供 遍历, 过滤,等多个操作数组的方法. 简直完爆Java的的数组(长度固定,单一类型).而Java中的集合类 就是弥补数组不足,其底层大多使用Object [] 存储,只是提供动态扩容的策略,当然JDK的 API 之丰富,是其他语言难以匹敌的. 但是不妨碍我对Java.JavaScript的喜爱. Java就像 一个中年老妇女,你总能在JDK中 看到

  • 如何检测JavaScript中的死循环示例详解

    前言 如果我们需要执行用户写的代码,如和避免死循环?我们最近遇到了这个问题,因为写错代码很常见,所以我们进行了一下尝试. 首先我们需要使用iframe 这主要是安全考虑,我们需要一个sandbox环境来执行JavaScript,避免影响到整体.iframe的sandbox属性可以用来禁止弹窗等等,非常有用. 地址可以选择Blob url,不过blob url会持有当前web page的origin,如果用户拷贝一些乱七八糟的代码不小心执行的话,会有安全问题.所以最终决定用data URI. if

  • javaScript中的this示例学习详解及工作原理

    this的工作原理 如果一个函数被作为一个对象的方法调用,那么this将被指派为这个对象. 复制代码 代码如下: var parent = {    method: function () {        console.log(this);    }}; parent.method();// <- parent 注意这种行为非常"脆弱",如果你获取一个方法的引用并且调用,那么this的值不会是parent了,而是window全局对象.这让大多数开发者迷惑. 复制代码 代码如下

  • javascript中setTimeout的问题解决方法

    看到一个问题,大概是这个样子得. 复制代码 代码如下: name = 'out of you' foo = function(){ this.name = 'xxoo'; } foo.prototype.say = function(){ console.log(this.name); } f = new foo(); f.say(); // 这句会输出xxoo setTimeout(f.say, 500); // 这句会输出out of you 这是个坑,javascript的this是在调用

  • JavaScript中removeChild 方法开发示例代码

    1. 概述 删除后的节点虽然不在文档树中了,但其实它还在内存中,可以随时再次被添加到别的位置. 当你遍历一个父节点的子节点并进行删除操作时,要注意,children属性是一个只读属性,并且它在子节点变化时会实时更新 // 拿到待删除节点: var self = document.getElementById('to-be-removed'); // 拿到父节点: var parent = self.parentElement; // 删除: var removed = parent.remove

  • JavaScript中自带的 reduce()方法使用示例详解

    1.方法说明 , Array的reduce()把一个函数作用在这个Array的[x1, x2, x3...]上,这个函数必须接收两个参数,reduce()把结果继续和序列的下一个元素做累积计算,其效果就是: [x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4) 2. 使用示例 'use strict'; function string2int(s){ if(!s){ alert('the params empty'); return; } if

  • javascript中使用正则表达式进行字符串验证示例

    var reg=/正则表达式/: boolean reg.test(要验证的字符串); js引擎会将/正则表达式/""转换成一个RegExp对象,当字符串满足正则表达式的要求事,返回true. 我写的一个表达式验证示例:功能如下: 用户名,不能为空 密码6为数字 密码确认,两次输入密码必须相同 身份证号码必须是15位,或者是18位,最末尾也可以是X(该功能还没有写,有时间再补上) 复制代码 代码如下: <!DOCTYPE html> <html> <hea

随机推荐