Question

首先：我检查类似的问题，但不理解它们。在堆栈溢出的一些温和的家伙的帮助下，我曾经在我的网站上实现了以下间隔计时器序列。基本上它是一种预告片，它在自动幻灯片中起作用的例子（工作属性作为数组中定义的定时值 - 因此它可以保持灵活性，可以通过稍后更新数组值来改变序列和时间）。 / p>

JS：

var trailer = [1,3,4,2, …]  // works contained in automatic trailer
// define here individual properties of each work
var works = { 
    1:  { …, time: 95 },
    2:  { …, time: 150 },
    3:  { …, time: 105 },
    4:  { …, time: 50 }, 
    …
};

//automatic trailer show timer
var timeFrames = {};
var currentWork = trailer[0];
var time = 0;

for ( var i = 1; i < trailer.length; i++ ) {    
    var previousWork = trailer[i-1];    
    var currentWork = trailer[i];   
    var addTime = works[previousWork]['time'];
    time = time + addTime;
    timeFrames[time] = currentWork;
};
var maxStep = time + 90;

var timer;
var timerPaused = false;
var stepSize = 100;
var currentStep = 0;

var intervalTimer = function() {

    if ( !timerPaused ) { currentStep ++; }
    if ( !!timeFrames[currentStep] ) {

        fadeTrailerWorks( timeFrames[currentStep] );
        workChart = timeFrames[currentStep];    
    }
    if ( currentStep >= maxStep ) {

        timer = window.clearInterval(timer);
        currentStep = 0;        
    }
}

在documentReady下的某个位置，它被称为：

// start automatic trailer fader                        
timer = window.setInterval( intervalTimer, stepSize );

现在这一切都很有效。但现在我有了这个想法，而不是在末尾停止拖车滑块以使其自身重复（直到用户通过鼠标点击退出或触摸输入网站的内容）

我很难在这里尝试一切：

if ( currentStep >= maxStep ) { 

    // instead of: timer = window.clearInterval(timer);
    currentStep = 0;        
}

并遇到各种麻烦：计时器在重复之前暂停很长时间，计时器会越来越快地重复等等......

我想这最终是一个非常简单的添加行，但由于我完全不确定这段代码，我需要一些帮助！提前致谢！我知道这个问题非常具体，可能对许多人没有帮助。为此，我道歉。

修改

确定。所以假设这个计时器不太正确，我试图以自己的方式重写它（为了理解和学习一些东西）但我无法超越它:-(我试过了：

var trailer = [1,3,4,2, …]  // works contained in automatic trailer
// individual properties of each work
var works = { 
    1:  { …, time: 95 },
    2:  { …, time: 150 },
    3:  { …, time: 105 },
    4:  { …, time: 50 }, 
…
};
// get the time property of each work and store it in an array
var trailerTimes = [];
for ( var index in trailer ) {
    trailerTimes.push( works[trailer[index]]['time'] );
}
// timer function
var timer = function() {        

    if ( !timerPaused && steps < trailerTimes.length ) {
        // do something here
        setTimeout( function() {                
            timer();
        }, trailerTimes[steps] );   
    }
    steps ++
}
timer();

但这也不起作用。有人愿意帮助我，让它保持可理解吗？非常感谢！

Answer 1

一个想法是停止计时器，重置计数器并再次启动计时器

if ( currentStep >= maxStep ) { 
    timer = window.clearInterval(timer);
    currentStep = 0;    
    timer = window.setInterval( intervalTimer, stepSize );    
}

Answer 2

我相信这应该有效：

if ( currentStep >= maxStep ) {
        timer = window.clearInterval(timer);
        currentStep = 0;
        setTimeout(function(){
            timer = window.setInterval( intervalTimer, stepSize );
        }, stepSize);
    }

这只是在时间间隔过去后重新启动计时器

如何使间隔计时器重启？

2 个答案: