.each() is executing without any interval

Question

$(document).ready(function(e) {
    $('.holder').each(function()
    {
        $(this).addClass('dummy');
        setTimeout( function () {
            $('.dummy').children('.box').slideDown('300');
        },2000);
    });
});

I have n number of <div> inside another <div class='holder'>. So I thought of adding some effects to each child <div>. But the problem is all the child <div> inside the holder is sliding down simultaneously. It seems it does not obey the setTimeout(). Why this happens?

see http://stackoverflow.com/questions/7445941/how-to-make-delay-between-each-loops-of-jquery-each-function — Rituraj ratan, Oct 14 '13 at 13:15

score 2 · Answer 1 · answered Oct 14 '13 at 13:13

2

You need to increment the loop interval, also need to use the hodler reference inside the timeout callback

$(document).ready(function (e) {
    $('.holder').each(function (idx) {
        var $this = $(this).addClass('dummy');
        setTimeout(function () {
            $this.children('.box').slideDown('300');
        }, idx * 2000);
    });
});

answered Oct 14 '13 at 13:13

Arun P Johny

384,651
66
527
531

@Riturajratan FYI it can be fixed much faster than finding that question and copying it – Arun P Johny Oct 14 '13 at 13:16

Denys Séguret · Accepted Answer · 2013-10-14T13:20:43.077

1

The each loop is executing about instantly, and you give the same timeout to all setTimeout calls. So they're all executed 2000 ms after the (instant) loop.

A simple solution :

$(document).ready(function(e) {
    $('.holder').each(function(i){
        var $this = $(this);
        $this.addClass('dummy');
        setTimeout( function () {
            $('.box', $this).slideDown('300');
        },2000*(i+1)); // give different timeouts
    });
});

edited Oct 14 '13 at 13:20

answered Oct 14 '13 at 13:12

Denys Séguret

372,613
87
782
758

Thank you for the explanation. But I need some more help. I saw the class 'dummy' is getting added to all the holder `
` first and then the slidedown happens. So still every child is getting slidedown simultaneously.
– Sarvap Praharanayuthan Oct 14 '13 at 13:18
@SuryaS Your problem isn't really clear but does the edited version work for you ? – Denys Séguret Oct 14 '13 at 13:21
Thank you. I did a small typo :) Poor typing skill :@ – Sarvap Praharanayuthan Oct 14 '13 at 13:27

Tushar Gupta - curioustushar · Answer 3 · 2013-10-14T13:28:14.127

Use

$(document).ready(function (e) {
    $('.holder').each(function (interval) { // interval here is index of each loop
        $(this).addClass('dummy');
        var $this = $(this);
        setTimeout(function () {
            $this.children('.box').slideDown('300');
        }, 2000 * (interval + 1));
    });
});

Explanation

1st timeOut = 2000=  2000 * (interval + 1)=  2000 * (0+ 1)=  2000 * (1)
2nd timeOut = 4000=  2000 * (interval + 1)=  2000 * (1+ 1)=  2000 * (2)
3rd timeOut = 6000=  2000 * (interval + 1)=  2000 * (2+ 1)=  2000 * (3)

and so on

.each() is executing without any interval

3 Answers3