Периодические события в периодических событиях на Javascript
Уважаемое сообщество! Имеется такая проблема:
Требуется создать периодически мигающие кружки на javascript. Точнее, нужно, чтобы периодически (в нижеприведенном коде - 3 раза) повторялся один и тот же цикл. Сам цикл состоит из следующих последовательных событий: прорисовка желтого круга, прорисовка зеленого круга, прорисовка белого круга. Пока что дошёл до следующего кода, но он толком не работает. Усложняет проблему то, что в дальнейшем требуется изменять длительность интервалов между прорисовками кругов и между циклами при помощи генератора случайных чисел.
Заранее благодарен за помощь.
Код:
Требуется создать периодически мигающие кружки на javascript. Точнее, нужно, чтобы периодически (в нижеприведенном коде - 3 раза) повторялся один и тот же цикл. Сам цикл состоит из следующих последовательных событий: прорисовка желтого круга, прорисовка зеленого круга, прорисовка белого круга. Пока что дошёл до следующего кода, но он толком не работает. Усложняет проблему то, что в дальнейшем требуется изменять длительность интервалов между прорисовками кругов и между циклами при помощи генератора случайных чисел.
Заранее благодарен за помощь.
Код:
Код:
<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=cnt+1;
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>
<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=cnt+1;
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>
А setTimeout не уместнее тут? А то я не увидел, зачем бы в этих функциях нужна была периодическая повторяемость для вложенных функций, они же просто должны выполниться и всё?
setTimeout вообще не подходит - есть задержка на выполнение команды, но не пауза межу выполнениями команд.
Вобщем, проблема решена - требовалось переменные, которые указывали на окончание повторения циклов, объявлять глобальными. Код следующий:
Вобщем, проблема решена - требовалось переменные, которые указывали на окончание повторения циклов, объявлять глобальными. Код следующий:
Код:
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;
}
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;
}