Cycles in cycles using javascript
Question
I want to create a periodic process with inner cycles, using 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 answers
solution1
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. try defining them global 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
solution2
0 ACCPTED 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.