需要setInterval才能自行停止

我想要做一個非常簡單的動畫，繪製一個圓的中心點，然後慢慢繪製以漸進圓結尾的直線（半徑）。現在，圓圈部分工作正常，這是該行的代碼，只是沒有按照我的意圖工作。它只是不停止。當用戶點擊畫布的特定區域時，所有東西都會觸發。需要setInterval才能自行停止

var lineX = 390;  
canvas.addEventListener('click',ProcessClick,false); 
    function ProcessClick(toi){ 
     var posx = toi.layerX; 
     var posy = toi.layerY; 
     if(toi.layerX == undefined || toi.layerY == undefined){ 
      posx = toi.offsetX; 
      posy = toi.offsetY; 
     } 
     if(posx>=315 && posx<=465 && posy>=250 && posy<=300){ 
      ctx.clearRect(300, 60, 180, 180); 
      lineX = 390; 
      var interval = setInterval(aniRadio, 50); 
     } 
    }//ProcessClick 

    aniRadio = function(){ 
     if(lineX == 390){ 
      ctx.beginPath(); 
      ctx.arc(390, 150, 4, 0, Math.PI*2, true); 
      ctx.closePath(); 
      ctx.fillStyle = "black"; 
      ctx.fill(); 
     } 
     ctx.beginPath(); 
     ctx.moveTo(lineX, 150); 
     lineX += 5; 
     ctx.lineTo(lineX, 150); 
     ctx.closePath(); 
     ctx.stroke(); 
     if(lineX == 465){ 
      clearInterval(interval);//tried calling another function that just contains this line. No luck either. 
     } 
    }

我基本上希望間隔一旦線到達一個點就停下來，然後我可以調用繪製圓的函數。

來源

2012-12-03 Christian Blanco Tovar

你檢查interval'的'可達性，因爲'clearInterval'也適用於'undefined' – krichard

您需要在ProcessClick函數之外獲得var interval聲明。通過這種方式，它被聲明爲局部變量，它在aniRadio中爲undefined。

var interval; 
function ProcessClick() { 
    // ... 
    interval = setInterval(aniRadio, 50); 
} 
aniRadio = ...

來源

2012-12-03 08:22:40 Amadan

天哪，這樣的新手的錯誤。感謝您的回答，它現在按預期工作。 –

您應該使用自調用函數來共享主代碼和回調之間的變量。

每個函數在被調用時都會創建一個新的作用域（這是所有局部變量所在的地方）。函數可以訪問其作用域和父級作用域中的所有變量（調用它的函數）。所以，如果你想在兩個函數之間共享一個變量，你可以用一個包含共享變量的自調用函數來包裝這兩個函數。

(function() { 
    var interval; 
    var lineX = 390; 

    canvas.addEventListener('click',ProcessClick,false); 
     function ProcessClick(toi){ 
      var posx = toi.layerX; 
      var posy = toi.layerY; 
      if(toi.layerX == undefined || toi.layerY == undefined){ 
       posx = toi.offsetX; 
       posy = toi.offsetY; 
      } 
      if(posx>=315 && posx<=465 && posy>=250 && posy<=300){ 
       ctx.clearRect(300, 60, 180, 180); 
       lineX = 390; 
       interval = setInterval(aniRadio, 50); 
      } 
     }//ProcessClick 

     aniRadio = function(){ 
      if(lineX == 390){ 
       ctx.beginPath(); 
       ctx.arc(390, 150, 4, 0, Math.PI*2, true); 
       ctx.closePath(); 
       ctx.fillStyle = "black"; 
       ctx.fill(); 
      } 
      ctx.beginPath(); 
      ctx.moveTo(lineX, 150); 
      lineX += 5; 
      ctx.lineTo(lineX, 150); 
      ctx.closePath(); 
      ctx.stroke(); 
      if(lineX == 465){ 
       clearInterval(interval);//tried calling another function that just contains this line. No luck either. 
      } 
     } 
})();

來源

2012-12-03 08:31:44 BAK

這也可以。我現在看到我的錯誤，謝謝你的時間。 –

需要setInterval才能自行停止

回答

相關問題