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を呼び出します。それはゆっくりとイメージを透明化し、別のイメージにフェードインします。今は、トランス= .01までイメージをフェードアウトします。アラート（「完了」）やキャンバスのリセットを継続しません。私は何度もそれを見て、何をすべきか分かりません。

出典

2012-02-13 Dakota Jay Whipple

あなたがウェブでエラーを取得していますインスペクタ？私はアラート（「完了」）が発砲していない場合、スクリプトが何らかの理由でクラッシュしていると推測しています。 –

canvas.width＆canvas.heightはどこで定義しますか？ –

また、今どこで 'trans'を宣言しているのかは、各関数のローカル宣言に 'trans'があるように見えますが、ctxに対して行ったように、関数外のtrans宣言は表示されません。 –

これで問題が解決されない場合がありますが、少し単純化することもできます。

fadeloopを再帰的に使用していますが、whileループを使用するだけで簡単にトレース/デバッグできます。あなたが再帰の中でどのくらい深いかを把握する必要はありません。

私が思いつくことができる唯一の問題は、setTimeoutにsetTimeout（function、time）のメソッドシグニチャがあるかどうかです。他のすべては正しく見える。

出典

2012-02-13 03:09:00 Churk

whileループは機能しません。それは不具合があり、ガイドは私にこう書いてくれた。うん、setTimeoutはそうです。 –

同様の機能でテストしました。コードは次のとおりです。



    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のアラート（）が発生します。

私はあなたのアラートが発砲していない理由はわかりません。多少のエラーが発生した可能性があります。

出典

2012-02-13 03:45:05 trinity

トリニティの回答は正しいですが、発射しないアラートは、投稿されたコードを妨害する他のエラーがあるように聞こえますが、あなたが注文したものを持っている方法は、（あなたが描画した後、トランスから差し引くこと

<!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>

注意とその後、チェックをあなたがすべきかどうかを確認するために：FWIWは、ここで説明したように、それが動作していることを実証しているあなたのコードで、最小限のページですループを繰り返す）.01の近くで終わることは間違いない。あなたが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のタイムアウトで機能が終了しない

答えて

関連する問題