HTML5/Javascript超時未完成功能

我做了一個循環功能，以緩慢淡出圖像。HTML5/Javascript超時未完成功能

var ctx; // this is the canvas already defined 
function nextPic(i) 
    { 
     trans = 1; //resets transparent var to 1 
     fadeloop('out'); //starts loop 
     ctx.clearRect(0, 0, canvas.width, canvas.height); //clears canvas, this doesn't work 
     alert("done"); //this doesn't work either 

    } 
    function fadeloop(f){ //loop that fades 
     if(f == 'out'){ //make sure it wants to shade out 
      setTimeout(function() { //timed delay for fading out 
       fadeImgOut(); //calls function to fade out by .01 
       if(trans>0.0){ //if faded out break out of loop 
        fadeloop('out'); //if not restart function 
       } 
      },10); 
     } 
    } 
    function fadeImgOut(){ //function that fades out 
     ctx.clearRect(0, 0, canvas.width, canvas.height); 
     ctx.drawImage(img,0,0); 
     ctx.globalAlpha = trans; 
     trans = trans - .01; 
    }

一個按鈕調用nextpic。它會慢慢透明的圖像，然後淡入另一個。現在它將圖像淡出直到trans = .01。不會繼續進行警報（「完成」）或畫布重置。任何想法我一遍又一遍地看着它，不知道該怎麼做。

來源

2012-02-13 Dakota Jay Whipple

你在網上得到一個錯誤檢查？如果警報（「完成」）未觸發，我猜測腳本會因爲任何原因而崩潰。 – 2012-02-13 03:00:49

你在哪裏定義canvas.width＆canvas.height？ – 2012-02-13 03:02:07

另外，你現在在哪裏聲明'trans'，看起來每個函數都有一個'trans'的本地聲明，但是我沒有看到任何函數以外的任何聲明，就像你爲ctx所做的那樣。 – 2012-02-13 03:03:12

這可能無法解決您的問題，但可能會簡化一點。

您正在遞歸使用fadeloop，但您可以通過一個while循環簡單地完成此操作，這可以更輕鬆地跟蹤/調試。而且不必弄清楚你在遞歸內部有多深。

我能想出的唯一問題是setTimeout有setTimeout（函數，時間）的方法簽名嗎？一切看起來都正確。

來源

2012-02-13 03:09:00 Churk

while循環不起作用。它發生故障，導遊告訴我這樣寫。是的setTimeout呢。 – 2012-02-13 03:15:43

我測試了類似的功能。代碼是：



    var j = 100; 
    (function(){ 
     a(); // step 1; 
     alert("hello world!"); // step 3; Fired without almost no time delay. 
    })() 

    function a(){ 
     setTimeout(function(){ 
      b(); 
      if(j>1){ 
       a(); 
      } 
     }, 10);　// step 2; push the callback into a queue, and a() ends. 
    } 

    function b(){ 
     if(j > 1){ 
      j--; 
     } 
    }

結果是：警報立即被觸發，沒有任何延遲。結果是對的。

因爲 setTimeout是異步函數。這意味着當第一次執行a（）時，setTimeout中的回調函數將被推送到隊列中等待觸發。然後觸發expression function中的alert（）。

我不知道爲什麼你的警報沒有被解僱。也許發生了一些錯誤。

來源

2012-02-13 03:45:05 trinity

三位一體的答案是正確的，雖然警報不開火確實使它聽起來像你有一些其他錯誤干擾發佈的代碼。 FWIW，這裏是你的代碼的最小頁面演示所描述的，這是工作：

<!doctype html> 
<canvas id="canvas"></canvas> 
<script> 
var canvas = document.getElementById('canvas'); 
var ctx = canvas.getContext('2d'); 
var img = new Image(); 
img.onload = nextPic; 
img.src = 'http://cdn.sstatic.net/careers/ads/img/careers2-ad-header-so-crop.png'; 

function nextPic(i) { 
    trans = 1; //resets transparent var to 1 
    fadeloop('out'); //starts loop 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
    alert("done"); 
} 
function fadeloop(f){ //loop that fades 
    if(f == 'out'){ //make sure it wants to shade out 
    setTimeout(function() { //timed delay for fading out 
     fadeImgOut(); //calls function to fade out by .01 
     if(trans>0.0){ //if faded out break out of loop 
     fadeloop('out'); //if not restart function 
     } 
    },10); 
    } 
} 
function fadeImgOut(){ //function that fades out 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
    ctx.drawImage(img,0,0); 
    ctx.globalAlpha = trans; 
    trans = trans - .01; 
} 
</script>

注意，你有事情的排序方式（從反式減去圖紙後然後檢查，看看您是否應該重複這個循環），你會在.01附近結束是正確的。你需要重新排序以確保你點擊了0。

還要注意重複的浮點數減法：你沒有達到你認爲你的值（並且你永遠不會達到0循環）。一個很小的變化將使你得到它正確的開始（這裏假設你的形象已經被抽一次，所以沒關係從反式減去調用fadeImgOut前）：

function fadeloop(f){ //loop that fades 
    if(f == 'out'){ //make sure it wants to shade out 
    setTimeout(function() { //timed delay for fading out 
     trans = Math.max(0, trans - .01); 
     fadeImgOut(); //calls function to fade out by .01 
     if(trans>0.0){ //if faded out break out of loop 
     fadeloop('out'); //if not restart function 
     } 
    },10); 
    } 
} 
function fadeImgOut(){ //function that fades out 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
    ctx.globalAlpha = trans; 
    ctx.drawImage(img,0,0); 
}

來源

2012-02-13 05:30:34

HTML5/Javascript超時未完成功能

回答

相關問題