我如何setInterval调用类中的函数
[英]how do I setInterval to call a function within a class
问题描述
I have a class like: 
我有一个像这样的课程：
function run(){
this.interval;
this.start = function(){
this.interval = setInterval('this.draw()',1000);
};
this.draw = function(){
//some code
};} var run = new run(); run.start();
however I can't seem to reference/call this.draw() within the setInterval, it says this.draw() is not a function, and if I remove the quotes it says useless setInterval call, what am I doing wrong? 但是我似乎无法在setInterval中引用/调用this.draw() ，它说this.draw()不是函数，如果我删除引用无用的setInterval调用的引号，那我在做什么错呢？
3 个解决方案
解决方案1
13 已采纳 2011-10-29 22:46:25
The value of this is set depending on how a function is called. 值this设置取决于函数是如何被调用。 When you call a function as a constructor using new then this will refer to the object being created. 当您使用调用一个函数作为构造new ，然后this将涉及到正在创建的对象。 Similarly when you call a function with dot notation like run.start() then this will refer to run . 同样，当您调用带有点表示法的函数run.start()如run.start() this将引用run 。 But by the time the code run by the setInterval is called this doesn't mean what you think. 但是，在调用setInterval运行的代码时， this并不意味着您在想什么。 What you can do is save a reference to this and then use that reference, like the following: 您可以做的是保存this引用，然后使用该引用，如下所示：
function Run(){
var self = this;
self.start = function(){
self.interval = setInterval(function() { self.draw(); },1000);
};
self.draw = function(){
//some code
};
}
var run = new Run();
run.start();
Note also that you've created a function called run and a variable called run - you need to give them different names. 还要注意，您已经创建了一个名为run的函数和一个名为run的变量-您需要给它们指定不同的名称。 In my code (bearing in mind that JS is case sensitive) I've changed the function name to start with a capital "R" - which is the convention for functions intended to be run as constructors. 在我的代码中（请注意，JS是区分大小写的），我已将函数名称更改为以大写的“ R”开头-这是旨在作为构造函数运行的函数的约定。
EDIT: OK, looking at the other answers I can see that just maybe I overcomplicated it and as long as draw() doesn't need to access this it would've been fine to just say: 编辑：好的，看着其他的答案我可以看到，只是也许我过于复杂的它， 只要draw()并不需要访问this它会一直罚款，只是说：
this.interval = setInterval(this.draw, 1000);
But my point about not giving your constructor and later variable the same name still stands, and I'll leave all the self stuff in because it is a technique that you will need if draw() does need to access this . 但是，我的观点仍然是不给构造函数和以后的变量提供相同的名称，我将保留所有的self ，因为如果draw()确实需要访问this则需要使用this 。 You would also need to do it that way if you were to add parameters to the draw() function. 如果要将参数添加到draw()函数，则还需要这样做。
解决方案2
10 2017-03-25 08:36:53
See the following example in ES6 : 请参阅ES6中的以下示例：
<!DOCTYPE html> <html> <body> <canvas id="canvas" width="200" height="200" style="border: 1px solid black"></canvas> <script> class Circles { constructor(canvas, r = 5, color = 'red') { this.ctx = canvas.getContext('2d') this.width = canvas.width this.height = canvas.height this.r = r this.color = color setInterval( this.draw.bind(this), 1000 ) } draw() { this.ctx.fillStyle = this.color this.ctx.beginPath() this.ctx.arc( Math.random() * this.width, Math.random() * this.height, this.r, 0, 2 * Math.PI ) this.ctx.fill() } } </script> <script> var canvas = document.querySelector('#canvas') var circles = new Circles(canvas) </script> </body> </html>
解决方案3
-2 2011-10-29 22:46:12
function run(){
this.interval;
this.start = function(){
this.interval = setInterval(this.draw,1000);
};
this.draw = function(){
//some code
}
;}
var run = new run();
run.start();
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.