使用JavaScript循环循环
[英]Cycles in cycles using javascript
问题描述
I want to create a periodic process with inner cycles, using javascript. 
我想使用JavaScript创建一个具有内部循环的周期性过程。 Each cycle is represented by consequently changing circles - with specified time interval between them and specified time interval between cycles. 每个周期都由相应变化的圆圈表示-圆圈之间具有指定的时间间隔，而圆圈之间具有指定的时间间隔。 The problem is also getting harder, because I also need a variable time interval between cycles and circle (which I'm going to do using random number function). 问题也变得越来越棘手，因为我还需要在循环和循环之间设置可变的时间间隔（我将使用随机数函数来完成此操作）。
Currently I have the following code, which doesn't work properly: 目前，我有以下代码无法正常工作：
<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>
2 个解决方案
解决方案1
0 2013-01-10 10:56:24
problem 1 with this code: you are using int2 (defined in DrawC) as if it was defined globaly, the interval will not be cleared because int2 has no value in DrawGC. 此代码的问题1：您正在使用int2（在DrawC中定义），就好像它是全局定义的一样，由于int2在DrawGC中没有值，因此不会清除间隔。 try defining them global var int1, int2, int3 ; 尝试定义它们全局var int1, int2, int3 ; as first line in your code 作为代码的第一行
secondly, why are you using intervals if you want to cancel them after 1 loop, use setTimeout() instead which only calls the method once 其次，为什么要使用间隔，如果要在1次循环后取消间隔，请使用setTimeout()代替，该间隔仅调用一次方法
解决方案2
0 已采纳 2013-01-10 10:59:55
You should make the timer variables as global. 您应该将计时器变量设置为全局变量。 Try: 尝试：
var int0, int1, int2, int3;
Remove these variable declarations from the functions. 从函数中删除这些变量声明。
Try out this code, is this what you need? 试用此代码，这是您所需要的吗？
<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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.