0

javascript を使用して、内部サイクルを持つ定期的なプロセスを作成したいと考えています。各サイクルは、結果的に変化する円で表されます - それらの間の指定された時間間隔とサイクル間の指定された時間間隔。サイクルとサークルの間の可変時間間隔も必要であるため、問題も難しくなっています (これは乱数関数を使用して行います)。

現在、正しく動作しない次のコードがあります。

<html>
<body>

<canvas id="canv" widht="800" height="500"></canvas>
<script>

var ctx=document.getElementById("canv").getContext('2d');
var cnt=0;

var int0=self.setInterval(function(){startDraw()},5000);

function startDraw ()
{
    var int1=self.setInterval(function(){DrawC()},1000);
    cnt++;
    if (cnt==3)
    {
        int0=window.clearInterval(int0);
    }
}

function DrawC()
{
    ctx.beginPath();
    ctx.arc(200, 200, 50, 0, 2*Math.PI, true);
    ctx.fillStyle="yellow";
    ctx.fill();
    ctx.closePath();  
    var int2=self.setInterval(function(){DrawGC()},1000);
    int1=window.clearInterval(int1);
}

function DrawGC() 
{
    ctx.beginPath();
    ctx.arc(200, 200, 50, 0, 2*Math.PI, true);
    ctx.fillStyle="green";
    ctx.fill();
    ctx.closePath();  
    var int3=self.setInterval(function(){DrawWC()},1000);
    int2=window.clearInterval(int2);
}

function DrawWC() 
{
    ctx.beginPath();
    ctx.arc(200, 200, 52, 0, 2*Math.PI, true);
    ctx.fillStyle="white";
    ctx.fill();
    ctx.closePath();  
    int3=window.clearInterval(int3);
}

  function getRandomInt(min, max)
{
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

</script>
</form>

</body>
</html>
4

2 に答える 2

0

このコードの問題1：グローバルに定義されているかのようにint2（DrawCで定義）を使用している場合、int2にはDrawGCに値がないため、間隔はクリアされません。それらをグローバルに定義してみてください var int1, int2, int3; コードの最初の行として

次に、1ループ後に間隔をキャンセルする場合は、間隔を使用するのはなぜですか。setTimeout()代わりに、メソッドを1回だけ呼び出すを使用してください。

于 2013-01-10T10:56:24.037 に答える
0

タイマー変数をグローバルとして作成する必要があります。試す：

var int0, int1, int2, int3;

関数からこれらの変数宣言を削除します。

このコードを試してみてください。これは必要ですか?

<html>
<body>

<canvas id="canv" widht="800" height="500"></canvas>
<script>

var ctx=document.getElementById("canv").getContext('2d');
var cnt=0;

var int0, int1, int2, int3;

circleTime = 1000;
cycleTime = 5000;


int0 = self.setInterval(startDraw, cycleTime);

function startDraw ()
{
    console.log("startDraw...");
    // Start drawing circles
    self.setTimeout(DrawC, circleTime);

    cnt++;
    if (cnt == 4)
    {
        // Stop startDraw
        int0 = window.clearInterval(int0);

        /*
        // Let's draw again
        cnt = 0;
        cycleTime = getRandomInt(5000, 10000);
        circleTime = getRandomInt(1000, 2000);
        int0 = self.setInterval(startDraw, cycleTime);
        */
    }
}

function DrawC()
{
    console.log("Circle...");

    ctx.beginPath();
    ctx.arc(200, 200, 50, 0, 2*Math.PI, true);
    ctx.fillStyle="yellow";
    ctx.fill();
    ctx.closePath();  

    self.setTimeout(DrawGC, circleTime);
}

function DrawGC() 
{
    console.log("greenCircle...");

    ctx.beginPath();
    ctx.arc(200, 200, 50, 0, 2*Math.PI, true);
    ctx.fillStyle="green";
    ctx.fill();
    ctx.closePath();  

    self.setTimeout(DrawWC, circleTime);
}

function DrawWC() 
{
    console.log("whiteCircle...");

    ctx.beginPath();
    ctx.arc(200, 200, 52, 0, 2*Math.PI, true);
    ctx.fillStyle="white";
    ctx.fill();
    ctx.closePath();  
}

function getRandomInt(min, max)
{
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

</script>
</form>

</body>
</html>
于 2013-01-10T10:59:55.830 に答える