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

工作完美甚至我知道，对于你的教授来说，可能还有一些奇怪的东西。所以随时评论它。欢迎提供每一项改进的帮助！

到目前为止，非常感谢你的帮助，如果没有它，我将永远不会成功。

暂停和恢复setTimeouts数组

2 个答案: