即使在 JS 中声明后，继续的时间也已过

Time Elapsed To Continue Even After Declaring In JS

本文关键字：继续 时间 JS 声明      更新时间：2023-09-26

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

问题：问题是在我声明已用时间等于延迟后，它仅在剩余的持续时间内保持 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的解决方案！

请正确格式化代码，并尝试将其减少到所需的绝对最小值。在您的情况下，我相信您要求创建一个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

.. 等等。这是模运算：

 var currentFrame = Math.floor(elapsedTimeSeconds/delay)-1;
 var imgNumb = currentFrame % 5;
相关文章：