Fatal编程技术网
  • javascript/
  • 使用javascript的循环中的循环

使用javascript的循环中的循环

javascript html5-canvas

使用javascript的循环中的循环,javascript,html5-canvas,setinterval,Javascript,Html5 Canvas,Setinterval,我想使用javascript创建一个具有内部循环的周期性流程。每个循环都由相应的变化圆表示——它们之间有指定的时间间隔，循环之间有指定的时间间隔。这个问题也变得越来越难，因为我还需要一个周期和圆之间的可变时间间隔（我将使用随机数函数） 目前我有以下代码，无法正常工作： <html> <body> <canvas id="canv" widht="800" height="500"></canvas> <script> var ctx

我想使用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> 


var ctx=document.getElementById（“canv”）.getContext（“2d”）；
var-cnt=0；
var int0=self.setInterval（函数（）{startDraw（）}，5000）；
函数startDraw（）
{
var int1=self.setInterval（函数（）{DrawC（）}，1000）；
cnt++；
如果（cnt==3）
{
int0=窗口清除间隔（int0）；
}
}
函数DrawC（）
{
ctx.beginPath（）；
ctx.arc（200,200,50,0,2*Math.PI，真）；
ctx.fillStyle=“黄色”；
ctx.fill（）；
ctx.closePath（）；
var int2=self.setInterval（函数（）{DrawGC（）}，1000）；
int1=窗口清除间隔（int1）；
}
函数DrawGC（）
{
ctx.beginPath（）；
ctx.arc（200,200,50,0,2*Math.PI，真）；
ctx.fillStyle=“绿色”；
ctx.fill（）；
ctx.closePath（）；
var int3=self.setInterval（函数（）{DrawWC（）}，1000）；
int2=窗口清除间隔（int2）；
}
函数DrawWC（）
{
ctx.beginPath（）；
ctx.arc（20020052,0,2*Math.PI，真）；
ctx.fillStyle=“白色”；
ctx.fill（）；
ctx.closePath（）；
int3=窗口清除间隔（int3）；
}
函数getRandomInt（最小值、最大值）
{
返回Math.floor（Math.random（）*（max-min+1））+min；
}
此代码的问题1： 您正在使用int2（在DrawC中定义），就好像它是全局定义的一样，不会清除间隔，因为int2在DrawGC中没有值。 尝试将它们定义为全局的 
var int1、int2、int3
；作为代码的第一行

其次，为什么要使用间隔？如果要在1次循环后取消间隔，请使用
setTimeout（）
，它只调用该方法一次

您应该将计时器变量设置为全局变量。尝试：

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>  


var ctx=document.getElementById（“canv”）.getContext（“2d”）；
var-cnt=0；
变量int0、int1、int2、int3；
圈数=1000；
周期时间=5000；
int0=自身设置间隔（起始时间、周期时间）；
函数startDraw（）
{
console.log（“startDraw…”）；
//开始画圆圈
self.setTimeout（DrawC，circleTime）；
cnt++；
如果（cnt==4）
{
//停止startDraw
int0=窗口清除间隔（int0）；
/*
//让我们再画一次
cnt=0；
cycleTime=getRandomInt（500010000）；
circleTime=getRandomInt（10002000）；
int0=自身设置间隔（起始时间、周期时间）；
*/
}
}
函数DrawC（）
{
控制台日志（“圆圈…”）；
ctx.beginPath（）；
ctx.arc（200,200,50,0,2*Math.PI，真）；
ctx.fillStyle=“黄色”；
ctx.fill（）；
ctx.closePath（）；
self.setTimeout（DrawGC，circleTime）；
}
函数DrawGC（）
{
控制台日志（“绿色圆圈…”）；
ctx.beginPath（）；
ctx.arc（200,200,50,0,2*Math.PI，真）；
ctx.fillStyle=“绿色”；
ctx.fill（）；
ctx.closePath（）；
self.setTimeout（DrawWC，circleTime）；
}
函数DrawWC（）
{
console.log（“whiteCircle…”）；
ctx.beginPath（）；
ctx.arc（20020052,0,2*Math.PI，真）；
ctx.fillStyle=“白色”；
ctx.fill（）；
ctx.closePath（）；
}
函数getRandomInt（最小值、最大值）
{
返回Math.floor（Math.random（）*（max-min+1））+min；
}
您的问题到底是什么？setTimeout不是解决方案，因为据我所知，JS处理超时是根据当前时间设置的，所以setTimeout在循环中不能正常工作（我将得到毫秒间隔，而不是循环之间的秒间隔）.我将从文本框中获取循环数，但无论如何，在示例中，让它为4个循环。太好了！无论如何，随机循环间隔不起作用，但我取消了字符串“cycleTime=getRandomInt（500010000）；circleTime=getRandomInt（10002000）；”的注释，它工作得很好！谢谢！您应该更改第一个
cycleTime=5000到
cycleTime=getRandomInt（500010000）。