如何使间隔计时器重新启动？

Question

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

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);
    }

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