循環使用javascript循環使用javascript

我想使用javascript創建具有內部循環的週期性進程。每個週期由相應變化的圓圈表示 - 它們之間的指定時間間隔以及指定的週期之間的時間間隔。問題也越來越難，因爲我還需要一個循環和循環之間的可變時間間隔（我將使用隨機數函數）。循環使用javascript循環使用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>

來源

2013-01-10 Kuznetsov Illya

你的問題到底是什麼？ –

你應該讓計時器變量作爲全球。試試：

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-10 10:59:55 ATOzTOA

這幾乎是我所需要的，但該過程在4個週期後不會停止... –

何時應該停止？ – ATOzTOA

我將從文本框中獲取週期數，但是，無論如何，在示例中讓它爲4個週期。 –

問題1：您使用的，如果它是globaly定義（在DrawC定義）INT2，間隔將不會被清除，因爲int2在DrawGC中沒有值。嘗試定義它們全球 var int1, int2, int3;在你的代碼

其次第一線，你爲什麼要使用的時間間隔，如果你想在1個循環取消它們，使用setTimeout()而不是隻調用該方法一次

來源

2013-01-10 10:56:24

setTimeout不是解決方案，因爲，據我所知，雖然JS處理超時設置爲相應的當前時間，所以，設置超時將無法在週期中正常工作（而不是秒週期間隔，我會得到毫秒間隔）。 –

循環使用javascript循環使用javascript

回答

相關問題