0

これは私が遭遇した奇妙なことの1つです。

http://cabbibo.com

基本的に、私のサイトにはたくさんの回転する形があります。回転する各シェイプは、最初に呼び出されたときにタイムアウトを設定して、スピンさせます。訪問者がWebページをクリックするたびに、これらの形状はクリアされ、ランダムに再度生成されます。

問題は、2回目のクリックで回転が少し速くなることです。3回目のクリックではさらに速く、4回目のクリックでは非常に速く回転するため、途切れ途切れになり、流動性がなくなります。

chrome：// flags FPSカウンターでサイトを見ると、60 fpsで始まり、4回目または5回目のクリックまでに、20〜50fpsにジャンプします。

コードの省略形は次のとおりです。

//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);
}

このコードにはいくつかの穴があるかもしれませんが、機能します。問題は、5回目のクリック後に途切れるということです。

誰かがそれを必要とするならば、私はさらにコードを追加することができます、しかしどんな提案も非常に役に立ちます！

4

1 に答える 1

1

問題は、新しいオブジェクトを作成するたびに、タイムアウトがその作成コード内にあることでした。これは、タイムアウトが5回呼び出され、それをクリアしたときに1回だけクリアされたことを意味します。

この問題を解決するために、図形を回転させるループを含むタイムアウト関数を1つ作成しました。これは、私がそれをクリアしなければならないたびに、5つの形状すべてのループをクリアすることが不可欠であることを意味しました！

于 2012-08-14T21:37:14.943 に答える