暂停和恢复 setTimeouts 数组

Question

我在这里找到了关于如何暂停和恢复 setTimeout 的好答案。很有用。

但是如何解决一个类似的问题，但要使用 setTimeouts 数组？ 我需要单击任何元素以暂停，然后在单击上次停止的数组中的 setTimeout 后恢复，依此类推。

到目前为止，我的代码可以正常工作，只是它会在开始时恢复超时设置。有没有办法检查哪个 setTimeout 元素暂停并在此时再次恢复？我认为 var fadeTrailer 的第二个定义必须减去那些已经激活的元素。不知何故，它应该与索引一起使用。但我不知道怎么做。感谢您的帮助！

//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 resumeTrailerFade() {

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

fadeTrailer = [

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

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

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

};

我希望这是在这里执行此操作的正确方法。对初学者来说很好但也很困难的论坛；-) 我现在所做的是，我在开始时声明了一个时间轴变量：

var fadingTimeline = [

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

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

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

];

那我先出场了：

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

然后对于 resumeTrailerFade() 我尝试使用 fadeState 变量按索引 grep 元素数组，例如：

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

}

我知道最后一部分是愚蠢的代码，只是为了解释我的想法。 是否有人能够遵循我的想法并将其放入真正的工作代码中？太棒了！

Answer 1

已编辑：不知何故，我错过了 Igoel 的评论，他说了同样的话。对此感到抱歉。

没有简单的方法可以查询超时以查看已经过去了多少时间。您可以将超时的开始时间存储在单独的变量中，然后显式计算差异。

FWIW，请注意 JavaScript 超时不一定准确，因为 JavaScript 是单线程执行环境。

Answer 2

您向我展示的代码实际上对我来说很棒！ 我改变了一点（因为我不需要按钮等） 所以我这样声明变量：

var first = function() {
  // do the first thing
}
var second = function() {
  // do the second thing
}
var third = function() {
  // do the third thing
}
var fourth = function() {
  // do the fourth thing
}
var fifth = function() {
  // do the fifth thing
}
//…

var timer;
var timeFrames = {
  95: [first],
  190: [second],
  320: [third],
  420: [fourth],
  510: [fifth],
  //…
};
var timerPaused = false;   
var maxStep = 510;
var stepSize = 100;
var currentStep = 0;

var intervalTimer = function() {

if ( !timerPaused ) { currentStep ++; }
if ( !!timeFrames[currentStep] ) {
    if ( !!timeFrames[currentStep][0] ) {
        ( timeFrames[currentStep][0])(timeFrames[currentStep][1] );
    }
}
if ( currentStep >= maxStep ) {
    timer = window.clearInterval(timer);   
    currentStep = 0;
  } 
}  

在我需要它的函数内的正确位置，所以我把它自动启动：

//automatic trailer fader                       
timer = window.setInterval( intervalTimer, stepSize );
// interrupts automatic fader 
// restarts it (to give user time to stay on clicked elements within the fading content)
$("#Trailer").on( 'click.resumeTrailerFade', function() { 
  timerPaused = true;
  setTimeout( function() { timerPaused = false; }, 15000 ); // give some extra time when anything clicked before resume automatic fade again
} );

然后终于把我放的都废掉了：

//stops automatic trailer fader definitely without resume
timerPaused = true;
window.clearInterval(timer);
$("#Trailer").off( 'click.resumeTrailerFade' );

工作完美，即使我知道对你们教授来说可能还有一些奇怪的东西。 因此，请随时发表评论。欢迎大家帮忙改进！

到目前为止，感谢您的大力帮助，没有它我永远不会成功。