即使在JS中声明后仍然继续使用的时间

Question

我在这里有一个代码，其中imgNumb的值由timeElapsed变量定义。随着时间的推移，imgNumb的值从0开始到4的最大值，之后我希望它从0开始，就像循环中一样。大部分工作的功能是autoFade（）。

问题：问题是我声明elapsedTime等于延迟后，它只剩下4个持续时间的其余部分，并没有像以前那样增加。

请帮帮我！如果可以的话，我会非常感激！谢谢。

这里是下面的代码：

var a = document.getElementById("slidermain"); 
var b = a.getElementsByTagName("IMG"); 
var len = b.length; 

var cusOpac = 0; 
var delay = 4; 
var imgNumb = 0; 
var elem; 
var now, before = new Date(); 

function autoFade(){ 
    var loop = setInterval(function(){ 
    now = new Date(); 
    var timeDiff = (now.getTime() - before.getTime()); 
    var elapsedTime = Math.floor(timeDiff/1000); 
    var lendelay = len*delay; 
    var currentFrame = Math.floor(elapsedTime/delay)-1; 
    var imgNumb = currentFrame % 5; 
    initFade(imgNumb); 
    }, delay*1000); 
} 

function initFade(imgNumb){ 
    elem = b[imgNumb]; 
    startFadeEffect(elem); 
} 

function startFadeEffect(elem){ 
    opacSetting = cusOpac/10; 
    elem.style.opacity = opacSetting; 
    elem.style.display = "block"; 
    cusOpac++; 
    if(cusOpac > 10){ 
     cusOpac = 10; 
    } 
    var timer = setTimeout(function() { startFadeEffect(elem); }, 55); 
    if(opacSetting == 1){ 
     clearTimeout(timer); 
     cusOpac = 10; 
     elem.style.opacity = 1; 
     setTimeout(function() { endFadeEffect(elem); }, (delay*1000)/2); 
    } 
} 

function endFadeEffect(elem){ 
    opacSetting = cusOpac/10; 
    elem.style.opacity = opacSetting; 
    cusOpac--; 
    if(cusOpac < 0){ 
     cusOpac = 0;  
    } 
    var timer = setTimeout(function() { endFadeEffect(elem); }, 55); 
    if(opacSetting == 0){ 
     clearTimeout(timer); 
     elem.style.opacity = 0; 
     elem.style.display = "none"; 
     cusOpac = 0; 
     return false; 
    } 
} 

请注意我在寻找一个JavaScript唯一的解决办法！

Answer 1

请正确格式化代码，并尽量减少到必要的绝对最小值。你的情况，我相信你问到创建函数f(elapsedTimeSeconds) - >imgNumb，即是这样的：

• 如果delay * 0 <= elapsedTimeSeconds < delay * 1，imgNumb = 0
• 如果delay * 1 <= elapsedTimeSeconds < delay * 2，imgNumb = 0
• 如果delay * 2 <= elapsedTimeSeconds < delay * 3， imgNumb = 1
• 如果delay * 3 <= elapsedTimeSeconds < delay * 4，imgNumb = 2
• 如果delay * 4 <= elapsedTimeSeconds < delay * 5，imgNumb = 3
• 如果delay * 5 <= elapsedTimeSeconds < delay * 6，imgNumb = 4
• 如果delay * 6 <= elapsedTimeSeconds < delay * 7，imgNumb = 0
• 如果delay * 7 <= elapsedTimeSeconds < delay * 8，imgNumb = 1

...等等。

您已经知道Math.floor(elapsedTimeSeconds/delay)-1为您提供了什么，如果delay*1 <= elapsedTimeSeconds < delay*6，但在此之后它继续增长。

所以，你需要的是一个生产函数：

• 0 - > 0
• ...
• 4 - > 4
• 5 - > 0
• 6 - > 1
• ...
• 9 - > 4

..等等。这就是modulo operation：

var currentFrame = Math.floor(elapsedTimeSeconds/delay)-1; 
var imgNumb = currentFrame % 5;