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超时未完成功能

回答

相关问题