pause and resume array of setTimeouts

Question

I found good answers here to how pause and resume a setTimeout. Very useful.

But how can I resolve a similar issue but with an array of setTimeouts? I need a click on any element to pause and then resume after the click on the setTimeout in the array where it was stopped last time and so on.

My code so far works except the fact that it resumes the timeout sets at the beginning. Is there a way to check on which setTimeout element the pause was made and resume at this point again? I presume the second definition of var fadeTrailer has to subtract those elements that have been activated already. Somehow it should work with the index. But I don’t know how. Thanks for help!

//automatic fader
fadeTrailer = [

        setTimeout( function() {
            //first action
        }, 9500),

        setTimeout( function() {
            //second action )   
        }, 19000),

        setTimeout( function() {
            //third action  
        }, 32000),

];

$("#Trailer").on( 'click.resumeTrailerFade', function() { resumeTrailerFade(); } ); 

function resume

function resumeTrailerFade() {

$.each( fadeTrailer, function(i, timer) {
    clearTimeout(timer);
} );

fadeTrailer = [

    setTimeout( function() {
        //first action
    }, 9500),

    setTimeout( function() {
        //second action )   
    }, 19000),

    setTimeout( function() {
        //third action )    
    }, 32000),          
];

};

I hope this is the right way to do this here. Good but also difficult forum for beginners ;-) What I did now is that I declared a timeline variable at the start as:

var fadingTimeline = [

setTimeout( function() {
    //anything
fadeState = 0;
}, 9500),

setTimeout( function() {
    //anything
    fadeState = 1;  
}, 19000),

setTimeout( function() {
    //anything
    fadeState = 2;  
}, 32000),

];

Then I put in the first appearance:

//automatic fader
                    fadeTrailer = fadingTimeline;

                    // interrupts automatic fader and restarts it (to give user time to stay on each work when clicking elements in it)                     
                    $("#Trailer").on( 'click.resumeTrailerFade', function() { resumeTrailerFade(); } ); 

Then for the resumeTrailerFade() I tried to grep the array of the elements by index using the fadeState variable like:

function resumeTrailerFade() {

$.each( fadeTrailer, function(i, timer) {
    clearTimeout(timer);
} );

//filter timeline array for already passed setTimeouts
fadeTrailerRemain = $.grep( fadingTimeline, function(n) {
    return ( n.index < fadeState );
});

}

I know the last part is silly code, just for explaining my idea. Is there someone out there able to follow my idea and put it into real working code? Would be so awesome!

Answer 1

Edited: Somehow I missed Igoel's comment where he says the same thing. Sorry about that.

There is no simple way to query a timeout to see how much time has elapsed. You can store the start time of a timeout in a separate variable and then calculate the difference explicitly.

FWIW, note that JavaScript timeouts are not necessarily accurate as JavaScript is a single-threaded execution environment.