Define timeouts between steps of jQuery.each() loop

Question

As far as I know, $.each() is a synchronous function, so I think, somehow it has to be possible - with some sort of technique - to delay the steps of the looping through the array.

I didn't find a proper way yet. How could I set timeouts for it's steps properly?

UPDATE:

The problem, why I need this, is that the number of the steps in the loop, and the calculations are huge, and they make the asynchronous functions too slow. I would like to save some processor speed for them, with defining "priorities" with this delaying. I am using a non-callback function, mostly jQuery.css() in the steps of the loop.

IMPORTANT:

I am looking for a technique to set the delays IN BETWEEN steps, to reduce the amount of calculations, not setting HUGE amounts of timeouts with the loop, what will run by time.

Can you describe exactly what you're trying to do. This question is the definition of an XY problem. — Rory McCrossan
– Rory McCrossan, Commented May 22, 2014 at 7:11

Adam · Accepted Answer · 2014-05-22 07:54:21Z

7

I'd suggest not using .each() but looping the collection manually.:

HTML

<div class="foo">A</div>
<div class="foo">B</div>
<div class="foo">C</div>
<div class="foo">D</div>
<div class="foo">E</div>

Javascript

var collection = $('.foo');
if( collection.length > 0 ){
    var i = 0;
    var fn = function(){
        var element = $(collection[i]);
        console.log(i + ' (' + element.text() + ') : %o', element);
        // Do whatever
        if( ++i < collection.length ){
            setTimeout(fn, 5000);
        }
    };
    fn();
}

Could be fairly easily wrapped into a $('.foo').delayedEach(5000, function(){}) extension if you wanted.

Working fiddle

answered May 22, 2014 at 7:54

Adam

6,8124 gold badges45 silver badges72 bronze badges

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

Comments

MitulP91 · Accepted Answer · 2014-05-22 07:16:25Z

2

Depending on your situation, something like this could work:

$('.some-results').each(function(i) {
  $(this).delay(500 * i).someAction();
});

In this example, you use the index number (i) of the array to have each iteration delayed by 500ms more than the last. Hope this helps.

NOTE: In case it is not clear, someAction() can be whatever you were planning to do with the element. Could be an animation, obtaining a value, etc.

answered May 22, 2014 at 7:16

MitulP91

1,3532 gold badges13 silver badges25 bronze badges

1 Comment

István Pálinkás Over a year ago

As far as I see, this doesn't use any callbacks, it simply sets timeouts IN the steps, not BETWEEN them.

Hitesh Modha · Accepted Answer · 2014-05-22 07:41:00Z

1

Try this Code:

HTML

<div class="result"></div>
<div class="result"></div>
<div class="result"></div>

Javascript

$('.result').each(function(i) {
  setTimeout(function(){ alert(i);},5000*i);
});

Working JSFiddle

answered May 22, 2014 at 7:41

Hitesh Modha

2,7885 gold badges31 silver badges47 bronze badges

Collectives™ on Stack Overflow

Define timeouts between steps of jQuery.each() loop

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related