javascript - 如何让间隔定时器自动重新启动？

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

现在这一切都运行得非常好。但现在我有了一个想法，而不是在最后停止预告片 slider 以使其不断重复(直到用户通过鼠标单击或触摸输入网站内容退出)

我很难在这里尝试我能想象到的一切:

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