Restart jQuery.each() after loop ends

Question

I have array of values and i want to set those values as placeholders to my input.

How to achieve this using jQuery.each() only because i solved my issue with this solution and it works perfectly.

I tried doing this to restart it but it's not working:

if(index==arr.length) index=0;

HTML code:

 Values : <input name='input' id='input' />

JS/jQuery code:

var arr = new Array();
for (var i = 0; i <= 5; i++) {
    arr.push('Value ' + i);//fill array with values
}

function eachChange(){
   var x=0;
   $.each(arr, function (index, value) {
       x++;
   setTimeout(function(){ 
       $('input').attr('placeholder', value);
      }, x * 1000); 
       if(index==arr.length) index=0;

 });   

}
eachChange();//call function

Fiddle: http://jsfiddle.net/charaf11/5ZQgX/

score 1 · Answer 1 · answered Aug 30 '13 at 15:30

you can compare the index with the arr.length like this

var arr = new Array();
for (var i = 0; i <= 5; i++) {
    arr.push('Value ' + i);//fill array with values
}

function eachChange(){
$.each(arr, function (index, value) {
setTimeout(function(){ 
   $('input').attr('placeholder', value);
   //if it is the last element in arr setTimeout and call eachChange() 
   if(index>=arr.length-1){
        setTimeout(function(){  
           eachChange();     
        },1000);
   }

  }, index * 1000); 
});   

}
eachChange();

http://jsfiddle.net/R274P/1/

score 1 · Accepted Answer · answered Aug 30 '13 at 15:35

There are two issues with trying to restart a .each() loop this way. First and foremost, that's not how .each() really works. It's less a loop and more shorthand for calling the function on every element. If you gave that anonymous function a name (let's go with setPlaceholder()), the .each() call is essentially doing this:

setPlaceholder(0, arr[0]);
setPlaceholder(1, arr[1]);
setPlaceholder(2, arr[2]);
setPlaceholder(3, arr[3]);
setPlaceholder(4, arr[4]);
setPlaceholder(5, arr[5]);

The index value it passes to the function isn't used for looping purposes, so trying to set it to 0 won't have any impact on the .each() call.

The second issue is your if condition. It'll never actually fire, since the final "iteration" of the .each() call will have arr.length - 1 as its value, not arr.length.

I'm not sure why you want to have it keep looping, but if that's your goal, you could accomplish it like this:

function eachChange(){
    $.each(arr, function (index, value) {
        setTimeout(function() {
            $('input').attr('placeholder', value);
        }, index * 1000);
        if (index == arr.length - 1) {
            setTimeout(eachChange, (index + 1) * 1000);
        }
    });   

}
eachChange();//call function

What that should do is schedule eachChange() to be called again 1 second after the last placeholder update takes place. You can add in some other checks to limit the number of times it recurses, but if you want it to happen indefinitely that should do the trick.

Here's an updated fiddle demonstrating it.

score 0 · Answer 3 · answered Aug 30 '13 at 15:32

I dont think you can reset the counter of the $.each function, as it seems to encapsulate a simple for loop. You dont have access to the counter from the outside.

However, try:

function eachChange(initX){
   var x = initX || 0;
   $.each(arr, function (index, value) {
       x++;
       setTimeout(function(){ 
          $('input').attr('placeholder', value);
       }, x * 1000); 

       // Call yourself but pass current x
       if(index==arr.length) eachChange(x); 

   });   
}

Remove the initX part if you want x to reset, but i assume you want it to keep counting from where the previous loop finished.

Restart jQuery.each() after loop ends

3 Answers3

Linked