CODEWITHSUNDEEP
javascriptjquerytimersetintervalrepeat
Garavani
Garavani

Reputation: 785

How to make an interval timer restart itself?

First of all: I check the similar questions, but didn’t understand them. With the help of some gentle guys from stack overflow I once implemented the following interval timer sequence on my website. Basically it is kind of a trailer which in automatic slides work examples (work properties as f.e. timing values defined in an array – so it can be kept flexible having the possibility to change the sequence and timing by updating the array values later on).

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

In some position under documentReady it is called:

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

Now all this is working really great. But now I had the idea instead of stopping the trailer slider at the end to keep it repeating itself (until the user exits via mouse click or touch entering the site’s content)

I had a hard time trying everything I could imagine here:

if ( currentStep >= maxStep ) { 

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

and got in all kind of troubles: Timer pausing extremely long before repeating, Timer repeating itself faster and faster and so on…

I guess this in the end is a very simple line to add, but as I am quite sure to not understand this code entirely I need some help with this! Thanks in advance! I know this question is very specific and may not be helpful for many people. For this I apologize.

EDIT:

Ok. So assumed this timer is not quite correct, I tried to rewrite it in my own way (in order to understand and learn something) but I couldn’t get ahead of it :-( I tried:

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

but this didn’t work either. Someone willing to help me out here and keep it understandable, also? Thanks so much!

Upvotes: 0

Views: 217

Answers (2)

Erik
Erik

Reputation: 123

I believe this should work:

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

this is simply restarting the timer after the time interval has passed

Upvotes: 1

mmsilviu
mmsilviu

Reputation: 1461

An idea is to stop the timer, reset the counter and start the timer again

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

Upvotes: 1

Related Questions