如何设置间隔来调用类中的函数

发布于 2024-12-12 08:08:33 字数 369 浏览 0 评论 0原文

我有一个像这样的类：

function run(){
this.interval;
this.start = function(){
    this.interval = setInterval('this.draw()',1000);
};
this.draw = function(){
    //some code
};} var run = new run(); run.start();

但是我似乎无法在 setInterval 内引用/调用 this.draw() ，它说 this.draw() 不是一个函数，如果我删除引号，它会显示无用的 setInterval 调用，我做错了什么？

原文

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?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

你怎么敢 2024-12-19 08:08:33

bind() 方法！

请参阅 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>

The bind() method!

See the following example in 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>

回复收藏 0 原文

笑梦风尘 2024-12-19 08:08:33

this 的值根据函数的调用方式进行设置。当您使用 new 将函数作为构造函数调用时，this 将引用正在创建的对象。类似地，当您调用带有点符号的函数（例如 run.start()）时，this 将引用 run。但是，当 setInterval 运行的代码被调用时，this 并不意味着您的想法。您可以做的就是保存对 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();

另请注意，您已经创建了一个名为 run 的函数 and< /em> 一个名为 run 的变量 - 您需要为它们指定不同的名称。在我的代码中（请记住 JS 区分大小写），我已将函数名称更改为以大写“R”开头 - 这是旨在作为构造函数运行的函数的约定。

编辑：好的，看看其他答案，我可以看到，也许我把它弄得太复杂了，只要draw()不需要访问this 直接说就可以了：

this.interval = setInterval(this.draw, 1000);

但是我关于不给构造函数和后来的变量使用相同名称的观点仍然有效，并且我将保留所有 self 东西，因为这是一种你需要的技术，如果draw() 确实需要访问this。如果您要向 draw() 函数添加参数，您也需要这样做。

The value of this is set depending on how a function is called. When you call a function as a constructor using new then this will refer to the object being created. Similarly when you call a function with dot notation like run.start() then this will refer to run. But by the time the code run by the setInterval is called this doesn't mean what you think. What you can do is save a reference to this and then use that reference, like the following:

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. 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.

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:

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. You would also need to do it that way if you were to add parameters to the draw() function.

回复收藏 0 原文

~没有更多了~