variable timer with setTimeout() inside jQuery .each

Question

I want to cycle through a bunch of jpg pictures as a slideshow. I have been using setInterval with success so far. However, I now want to have each slide show for a custom time. For example slide 1 shows for 6 seconds, then slide 2 for 3 seconds, etc. I tried the following code:

var sl = [["PodLoop1.jpg", 6000], ["PodLoop2.jpg", 3000]];
$.each(sl, function(i, value) {
    fl = '<img src="media/' + value[0] + '" height="100%">'
    setTimeout(function(){
        $("#InnerMedia").html(fl);
        if (i >= sl.length) {
            window.location.href = "./media.php"; // refresh to restart from the beginning
        }
    }, value[1])
});

But this doesn't work. It just jumps to the last slide in the list. What am I doing wrong? I have looked at several similar questions on SO, for example this one, but none of them seem to deal with a variable timer.

Star089 · Accepted Answer · 2017-03-26 16:21:53Z

1

i will never be equal sl.length change the code to i >= sl.length-1

answered Mar 26, 2017 at 16:21

Star089

472 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rajesh Dixit Over a year ago

Good point. I missed it. +1 :-) But this is a partial answer as user wishes to chain events.

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

Your issue is you are using .each loop.

setTimeout

What setTimeout does is it registers an event at designated time. Now when you run this in loop, this will register 2 events, 1 at after 3secs and another at after 6secs. So it runs correctly.

To fix this, you will have to chain initialisation of these setTimeouts. You will have to register new event inside another one.

Sample

function createTimeout(arr, index){
  if(!arr[index] == undefined) return;
  setTimeout(function(){
    console.log(arr[index][0]);
    createTimeout(arr, ++index)
  }, arr[index][1])
}

var sl = [["PodLoop1.jpg", 6000], ["PodLoop2.jpg", 3000]];
createTimeout(sl, 0);

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Mar 26, 2017 at 16:20

Rajesh Dixit

25k5 gold badges52 silver badges86 bronze badges

6 Comments

Chiwda Over a year ago

Wouldn't recursion be a problem when I have a longer list?

Rajesh Dixit Over a year ago

if(!arr[index] == undefined) return; will make sure it does not go in endless loop

Chiwda Over a year ago

I was referring to the state where I have a 100 files (say) the memory usage will be huge! Because recursion...

Rajesh Dixit Over a year ago

@Chiwda No. You are passing reference and index to function. So it will not have that huge impact.

Chiwda Over a year ago

See this answer especially the discussion on memory towards the end.

|

Collectives™ on Stack Overflow

variable timer with setTimeout() inside jQuery .each

2 Answers 2

1 Comment

setTimeout

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

setTimeout

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related