Question

这是我遇到过的一个陌生事物。

基本上，在我的网站上，有一堆旋转的形状。每个旋转形状在首次调用时设置超时，以使其旋转。每当访问者点击网页时，这些形状都会被清除并再次随机生成。

问题是，在第二次点击时，它们的旋转速度会快一些。在第三次点击甚至更快，并通过第四次点击他们旋转得如此之快，以至于它们变得非常波动和不流动。

当使用chrome：//标记FPS计数器观看网站时，它将以偶数60 fps开始，然后到第四次或第五次点击时，它将在20到50 fps之间跳跃。

代码的缩写部分如下：

//creates timeout variable OUTSIDE the timeout function, so it can be cleared
var t;
var speedRandom;
function getRandSpeed(){
    var randomSpeed = (Math.random()*.01);
    if (randomSpeed<=.001){
        randomSpeed=.001;
    }else if(randomSpeed>=.005){
        randomSpeed=.005;
    }
    console.log(randomSpeed);
    if (rightSpin==0){
        speedRandom=randomSpeed;
        rightSpin=1;
    }else{
        speedRandom=-randomSpeed;
        rightSpin=0;
    }
}

objs[whichImg].speed = speedRandom;

function rotateDrawing(whichImg){

    //This is the function that centers the object
    centerImg(whichImg);


    //translates the object to the centered point (different for each frame)
    objs[whichImg].ctx.translate(objs[whichImg].centeredX,objs[whichImg].centeredY);

    //rotates to the correct angle
    objs[whichImg].ctx.rotate(objs[whichImg].angle);

    //draws the image
    objs[whichImg].ctx.drawImage(objs[whichImg].image,0,0,objs[whichImg].height,objs[whichImg].width);

    //adds to the angle of the object
    objs[whichImg].angle+=objs[whichImg].speed;

    t=setTimeout(function(){rotateDrawing(whichImg)},40);


}

//THE ABOVE CODE WILL BE EXECUTED FOR EVERY SHAPE (TOTAL AROUND 5)


//this is what is called when the screen is clicked
function destroy(){

    functionThatClearsAllTheImages();
    clearTimeout(t);
    rotateDrawing(whichImg);
}

这段代码中可能有一些漏洞，但它确实起作用，问题是在第五次点击后它是不稳定的。

如果有人需要，我可以添加更多代码，但任何建议都会非常有用！

Answer 1

问题是每次我创建一个新对象时，超时都在该创建代码中。这意味着超时被调用了5次，当我清除它时，它只被清除一次。

为了解决这个问题，我创建了一个超时函数，其中包含一个可以旋转形状的循环。这意味着每次我必须清除它时，必须清除所有5个形状的循环！

setTimeout每次清除并再次调用时都会增加

1 个答案: