setTimeout in jquery's each loop

Question

This is what i have. My problem is, each loop doesn't wait setTimeout to complete its job. I have 2 console.log('elmDuration = ')... before slider.goToNextSlide executed. Which is wrong. I would use generator functions and yield if this is a server side code, but not.

$('li').each(function(index, elm){
        var image = $(elm).find('img')[0];
        var video = $(elm).find('video')[0];
        var media = image || video;

        var elmDuration = $(media).attr('data-duration');
        console.log("elmDuration = ", elmDuration);
        (function(){
            setTimeout(slider.goToNextSlide, elmDuration * 1000);
        })();
});

I am stuck with this. Thanks.

Felix Kling · Accepted Answer · 2014-02-14 04:23:27Z

3

If you want to advance to the next element when the timeout finished, you have to do that manually:

var $lis = $('li');
var index = 0;

function next(index) {
    var elem = $lis[index];
    var image = $(elm).find('img')[0];
    var video = $(elm).find('video')[0];
    var media = image || video;

    // if there is always going to be either an img **or** a video element, 
    // you can directly do
    // var  elmDuration = $(elem).find('img, video').attr('data-duration');
    var elmDuration = $(media).attr('data-duration');
    console.log("elmDuration = ", elmDuration);

    setTimeout(function() {
        slider.goToNextSlide();
        if (index < ($lis.length - 1)) {
            next(++index);
        }
   }, elmDuration * 1000);
}

next(index);

answered Feb 14, 2014 at 4:23

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

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

Comments

Igor · Accepted Answer · 2014-02-14 04:14:37Z

3

each loop is not going to wait for setTimeout. It will execute for all elements in $('li') before setTimeouts start firing. The purpose of setTimeout is to let the code that calls it proceed without interruption and execute the first parameter when timeout occurs.

answered Feb 14, 2014 at 4:14

Igor

15.9k1 gold badge29 silver badges34 bronze badges

Comments

TGH · Accepted Answer · 2014-02-14 04:15:23Z

2

You have to take the code out of the setTimeout if you want it to execute inside the loop. SetTimeout is a way to execute code in x milliseconds, but it won't execute until the single javascript thread is available. The loop will keep the thread busy, so all the seTimeouts will have to wait until the end.

answered Feb 14, 2014 at 4:15

TGH

39.4k13 gold badges106 silver badges140 bronze badges

2 Comments

alioguzhan Over a year ago

understood. But i need to wait for element-specific seconds before execute the code inside setTimeout. How can i handle this?

Igor Over a year ago

you already are doing it. there is no need to wrap setTimeout call in another function.

Collectives™ on Stack Overflow

setTimeout in jquery's each loop

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related