CoffeeCat's IT Blog

有效解决Javascript中的setInterval在类中的应用

今天在写一个小程序,遇到一个小问题,就是我想用setInterval函数定时调用某一个函数,而这个函数,又恰好是我的一个类的成员函数。最初,我是这样写的:

function ClassA()
{
    this.i = 0;
    
this.start = function()
    {
        setInterval(
this.callback,5000);
    }
    
this.callback = function()
    {
        this.i++;
        //alert(
this);
    }
}
var a =
new ClassA();
a.start
();

  这段代码的目的,是希望让ClassA类中的成员函数callback,每隔5秒被调用一次,从而能让ClassA中的属性i自增。

  但是,运行这段代码以后,我们发现,浏览器提示this.i不存在。为什么会出现这样的问题呢?我们在this.i++;下面加上alert语句,看看this到底是什么。结果显示,this是一个Object Window。而不是我们希望的对象a。为什么会这样呢?因为setInterval是一个Window类的成员函数,所以回调函数也从属于Window类了。

  那如何解决这个问题呢?请看下面的代码:

function ClassA()
{
    
this.i = 0;
    
this.start = function()
    {
        
var _this = this;
        
var callback = function(){ _this.callBack(); };
        window.setInterval(callback,
5000);
    }
    
this.callback = function()
    {
        
this.i++;
    }
}
var a 
= new ClassA();
a.start();


  在start成员函数中,我们用_this保存了ClassA的this,然后,定义了一个内部匿名函数,这个函数用于setInterval的回调,而在这个匿名函数中,通过_this来调用callBack,这样,就可以保证在调用callback函数时,this指针不是Window,而是对象a,大家可以细细的品味一下其中的奥秘~~


Ferris Xu (CoffeeCat)
2007-10-20

posted on 2007-10-20 01:16 CoffeeCat 阅读(1663) 评论(3)  编辑 收藏 引用

评论

# re: 有效解决Javascript中的setInterval在类中的应用 2008-03-07 10:05 sonicdx

代码能运行吗?至少 ClassA a = new ClassA(); 肯定是错误的。

function ClassA(){};
ClassA.prototype = {
i:0,
n:'A',
callback:function()
{
this.i++;
//alert(this.i);
var out = document.getElementById('out');
out.innerHTML += this.n + ' ' + this.i + '<br />';
},
start:function(l)
{
var _this = this;
var _callbak = function(){_this.callback();};
window.setInterval(_callbak,l);
},
};

//prototype 方法

var a = new ClassA();
a.start(1000);

var b = new ClassA();
b.n ='B';
b.start(1500);

  回复  更多评论   

# re: 有效解决Javascript中的setInterval在类中的应用 2008-03-07 20:01 CoffeeCat

@sonicdx
呵呵,谢谢您的提醒,我确实把代码写错了,应该是
var a = new ClassA();
而不是
ClassA a = new ClassA();

写这篇文章的时候,我没有调试代码,只是用代码表达了问题,不小心和Java搞起来了,呵呵~~
我已经更正文中的错误,再次感谢您的提醒和关注!  回复  更多评论   

# re: 有效解决Javascript中的setInterval在类中的应用 2014-12-26 21:30

胡扯蛋  回复  更多评论   

只有注册用户登录后才能发表评论。
<2007年10月>
30123456
78910111213
14151617181920
21222324252627
28293031123
45678910

导航

统计

公告

常用链接

留言簿(203)

随笔档案

收藏夹

搜索

最新评论

阅读排行榜

评论排行榜