Question

是否可以创建一个具有自己的setInterval（）;

的对象

我这里的代码http://jsfiddle.net/mLHJr/1/带有全局setInterval。我想拥有圆形对象的多个实例，并且每个实例拥有自己的具有不同帧速率的间隔。

这可能吗？

提前致谢

Answer 1

var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
var speed = 10;
var xv = 2;
var yv = 1;
var gravity = 2;
var circlex = 30;
var circley = 30;
var friction = 0.95;

var circle = {
    draw: function(x, y, r) {
        ctx.beginPath();
        ctx.arc(x, y, r, 0, Math.PI * 2);
        ctx.closePath();
        ctx.fill();
    }

};

function setCircleInterval(frames) {
    var c = this;
setInterval(function() {
    ctx.clearRect(0, 0, 200, 200);

    speed = speed * friction;

    if (speed < 0.01) {
        speed = 0;
    }

    yv += gravity;

    circlex += xv * speed;
    circley += yv * speed;

    if (circley >= 195) {
        circley = 195;
        yv *= -1;
    }

    if (circlex >= 195) {
        xv *= -1;
        circlex = 195;
    }

    if (circlex <= 5) {
        xv *= -1;
        circlex = 5;

    }
    c.draw(circlex, circley, 10);   
}, frames);
}


circle.setInterval=setCircleInterval;
circle.setInterval(1000 / 60);

Answer 2

您可以拥有任意数量的setIntervals。但是你拥有的越多，性能就越糟糕。为什么你需要不止一个？

只有一个绘制帧通常足够好。如果是圆形，则在处理程序的每个调用中创建一个数组，迭代该数组并绘制圆圈。

更好的方法可能是使用setTimeout。

Answer 3

使用setInterval()设置的每个计时器都有一个唯一的ID，该ID由该函数返回。将该id存储在对象的成员变量中，以将其与该计时器关联：

circle1.timerId = setInterval( func, time );
circle2.timerId = setInterval( func, time );
...

您可以稍后将timerId传递给clearInterval()：

来取消每个计时器

clearInterval( circle1.timerId );
clearInterval( circle2.timerId );
...

当然，最好在类中设置一些成员函数来执行这些操作。

Answer 4

有多种方法。您可以使用一个计时器并让它为数组或集合中的每个对象调用更新函数。或者，您可以创建单独的对象来调用自己的更新函数并拥有自己的计时器。

第一种选择通常更有效。

你还有另一个问题 - 如果每个圈子都有自己的计时器，你不能每次都像现在一样重新绘制整个画布。如果你这样做，那么每次重新绘制一个球时它将删除其他球，因此它们会在它们之间闪烁。您可以通过在重新绘制新位置之前让球只删除自己来解决这个问题 - 但是你必须处理重叠的球。

所以最好的方法是一个计时器，每次按顺序重新绘制所有球，这样“顶部”的球总是与下面的球重叠。

Javascript对象有自己的setInterval（）？

4 个答案: