Question

I want this to happen in a infinite loop, that I can exit at some point, but thats not the point..

So I have a list of dom elements with either video, or image.

I first look, is this an image, if so:

Display the image for X seconds
Then continue

If its a video

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

Now I start the proces again, and look again ,video or image? So the flow goes on forever, when it reaches the end, it just goes to the first element.

Now doing all that is not the problem, but putting that inside a loop and pausing for X amount of time, or till the video is done playing, there im stuck.

This is what it would look like:

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

So this loop should in this case restart every 4 seconds
Any ideas for methods that I can look at?

Answer 1

I think your code should be structured like this:

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