Add static pause in jQuery iteration of $.each

Question

How might I add a 1000 ms delay in this loop? I checked this result and it appears that they created their own method based on a variable. I'm only looking to add a static pause time between each iteration of the invocation of the selector() function.

(function doIt(){
    $.each(personArray, function(index, person){
         $(this).delay(1000 * index)selector(person.RPI)
});
});

EDIT: To add more to this question, I'm specifically struggling to find a way for my script to pause after invoking the function once per array item. Or:

Reference array item 1
Invoke function (array item 1)
Pause for some time
Reference Array item 2
Invoke function (array item 2)
etc.

I get the answers about pausing between iterations of the function as a whole, but I'm looking for a way to execute once per array item with a pause in between.

EDIT: after some more reading I've restructured my code as shown below:

var i= 0;
var interval = 3000;
(function iterate () {
    if (personArray.length > i) {
        $('#name').html((personArray[i].first))
        var x = (personArray[i].RPI);
        selector(x);
        i++;
    }
    setTimeout(iterate, interval);
})();

Now... a more important question is, how would I restart the ENTIRE function at an interval, say 24 seconds? Can I wrap this inside another setTimeout function with a 24000 snd argument? Here's a fiddle for that:

function person(first, last, RPI) {
 this.first = first;
 this.last = last;
 this.RPI =  RPI;
}
var MW = new person('Mike', 'W', 112792);
var MT = new person('Matt', 'T', 157750);
var DR = new person('Derek', 'R', 165413);
var DD = new person('Darrell', 'D', 112794);
var AG = new person('Andrew', 'G', 137183);
var KR = new person('Kris', 'R', 157751);
var BJ = new person('Bill', 'J', 82517);
var personArray = new Array();
var personArray = [MW, MT, DR, DD, AG, KR, BJ];
var i= 0;
var interval = 3000;
(function iterate () {
    if (personArray.length > i) {
    var x = (personArray[i].RPI);
        $('#name').html((personArray[i].first));
        selector(x);
        i++;
    setTimeout(iterate, interval);
    }
})();
function selector(x){
 $('#name2').html("this is x:"+ x ); 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<p id="name"></p>
<p id="name2"></p>

$(this).delay should work. But maybe you like on of the several solutions in this question: http://stackoverflow.com/questions/24849/is-there-some-way-to-introduce-a-delay-in-javascript — Nelson Teixeira, Jan 11 '17 at 23:52
What's wrong with the code you have there? Aside from it being syntactically invalid, anyway. — mpen, Jan 11 '17 at 23:52
it pauses at the end of the function rather than between each iteration the personArray by the selector function. If that's unclear I can update the question. — Michael Davis, Jan 11 '17 at 23:54
@NelsonTeixeira I looked at them. My question is how to pause BETWEEN each iteration of the array, not the entire function. — Michael Davis, Jan 11 '17 at 23:55
it shouldn't. it should pause in each interaction. I imagine you have seen the code error in `index)selector` part right ? — Nelson Teixeira, Jan 11 '17 at 23:55
are u sure this code is working ? shouldn't it be at least `$(this).delay(1000 * index); selector(person.RPI);` ? — Nelson Teixeira, Jan 12 '17 at 00:01
Maybe this will help: http://stackoverflow.com/questions/11085567/jquery-delay-to-work-with-append — sinisake, Jan 12 '17 at 00:07
Your own solution seems to work but you should be aware that you are working with a global `i` which might inadvertantly get modified anywhere else in your code. You could instead work with a property of your array, like `personArray.i`. — Carsten Massmann, Jan 14 '17 at 19:58
thank you, @cars10. The issue there is since I'm calling an array of objects I keep getting `Uncaught TypeError: Cannot read property 'RPI' of undefined` when I try to call personArray[person].RPI. Regardless since it's a relatively short script I'm writing I should end of needing to call another var i. — Michael Davis, Jan 14 '17 at 20:01
And another note: you should put the `setTimeout()` inside the `if`-block, since otherwise your code might run into "max. recursion level exceeded" problems. — Carsten Massmann, Jan 14 '17 at 20:02

Carsten Massmann · Accepted Answer · 2017-01-14T20:24:11.570

0

The following is a simplified version of your script. It works as expected.

It seems that you have not initialised i in your script. In my script I am using arr.i which I do initialise:

var arr=[{RPI:10},{RPI:20},{RPI:30},{RPI:40},{RPI:50}];
arr.i=0;
$(function(){
 (function iterate () {
   if (arr.length > arr.i) {
     $('#name').html(arr[arr.i++].RPI+'<br>')
     setTimeout(iterate, 1000);
   }
 })();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>the following will change ...</h2>
<div id="name" />

edited Jan 14 '17 at 20:24

answered Jan 14 '17 at 20:16

Carsten Massmann

26,510
2
22
43

Neglected to copy/paste that block in my last edit. Updated that now. – Michael Davis Jan 14 '17 at 21:40

Add static pause in jQuery iteration of $.each

1 Answers1