Question

我希望这在无限循环中发生，我可以在某个时刻退出，但那不是重点..

所以我有一个带有视频或图像的dom元素列表。

我首先看，这是一张图片，如果是这样的话：

Display the image for X seconds
Then continue

如果是视频

I play the video, and on the onend event, I continue

现在我再次启动过程，再看看视频或图像？所以流程会永远持续下去，当它到达终点时，它就会转到第一个元素。

现在做所有这不是问题，但是把它放在一个循环中并暂停X时间，或者直到视频完成播放，我就卡住了。

这就是它的样子：

func = () ->
console.log "Loop started, now wait X seconds"

delay 3000, ->
    console.log "OK, I waited 3 seconds, now lets go on"

delay 1000, ->
    console.log "Cool, I waited another second, now lets go on"
console.log "Ok, nothing to do, lets start again.."
func()

因此，在这种情况下，此循环应每4秒重新启动一次我可以看一下方法的想法吗？

Answer 1

我认为您的代码应该像这样构建：

status = 'nothing'

function loop() {
    if status == 'nothing'

        if next item is image
            show image
            status = 'image'
            countdown = 1000 // time to display the image

        if next item is video
            play video
            videoIsEnded = false
            status = 'video'
            video.onend = function { videoIsEnded = true }

    if status == 'image'
        if countdown-- < 0
            hide image
            status = 'nothing'

    if status == 'video'
        if videoIsEnded
            hide video
            status = 'nothing'
}

setInterval(loop, 1000) // check the status every second

Answer 2

不要使用无限循环。

改为使用requestAnimationFrame：

    // shim layer with setTimeout fallback
    window.requestAnimFrame = (function(){
      return  window.requestAnimationFrame       || 
              window.webkitRequestAnimationFrame || 
              window.mozRequestAnimationFrame    || 
              window.oRequestAnimationFrame      || 
              window.msRequestAnimationFrame     || 
              function( callback ){
                window.setTimeout(callback, 1000 / 60);
              };
    })();


    // usage: 
    // instead of setInterval(render, 16) ....

    (function animloop(){
      requestAnimFrame(animloop);
      render();
    })();
    // place the rAF *before* the render() to assure as close to 
    // 60fps with the setTimeout fallback.

为了暂停，您可以使用时间戳：

http://jsfiddle.net/q7qrP/1/

Javascript - 循环内部暂停

2 个答案: