How to repeat the items in array list again and again in JavaScript/HTML

Question

I am trying to display text from the array one by one on my website, i'm able to do it once but i wish to repeat the list again and again (start over) as long as the user keep the page open.

The below code works without while loop but only once:

<h1 id="looper" ></h1>

<script>
var i = ["ਸਤਿ ਸ੍ਰੀ ਅਕਾਲ", "Hello", "hola", "नमस्ते", "你好!", "Здравствуйте"];
for( var j = 0 ; j < i.length; j++ ) {
  setTimeout( (function(j){ return function(){$("#looper").text(i[j]);}})(j), j*1000 );
}
</script>

But when i use while loop the browser gets overloaded or freezes.

  while(true){
  for( var j = 0 ; j < i.length; j++ ) {
  setTimeout( (function(j){ return function(){$("#looper").text(i[j]);}})(j), j*1000 );
   }
  };

I'm working with Django, in case if it can be done using python as well.

You're while loop starts the for loop for an infinite number of times. While-true loops are "dangerous", try to avoid them. What you need is a "sleep" in between your calls. Checkout setInterval instead of setTimeout, it is probably what you are looking for. — Simon van Endern
– Simon van Endern, Commented Dec 25, 2020 at 10:25

user14860400 · Accepted Answer · 2020-12-26 09:54:17Z

2

Please try this one. It is working on my side.


<h1 id="looper" ></h1>

    <script>
    var i = ["ਸਤਿ ਸ੍ਰੀ ਅਕਾਲ", "Hello", "hola", "नमस्ते", "你好!", "Здравствуйте"];

        setInterval(function(){
            for( var j = 0 ; j < i.length; j++ ) {
                setTimeout( (function(j){ return function(){$("#looper").text(i[j]);}})(j), j*1000 )
            }
        }, 1000 * i.length);
        
    </script>

answered Dec 26, 2020 at 9:54

user14860400

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

3 Comments

Harman Thind Over a year ago

Hey Artem, yes it is working exactly as i wanted except it starts after 6 seconds the page is loaded, perhaps because of setInterval's millisecond parameter which you set to the length of list in our case 6.

user14860400 Over a year ago

check solution?

Harman Thind Over a year ago

I just use simple for loop with setTimeout method for first 6(length of list) seconds and then your code will take care after that.

Matthew Lin · Accepted Answer · 2020-12-25 10:23:28Z

2

You could use setInterval instead of setTimeout like so:

<script>
var i = ["ਸਤਿ ਸ੍ਰੀ ਅਕਾਲ", "Hello", "hola", "नमस्ते", "你好!", "Здравствуйте"];
for( var j = 0 ; j < i.length; j++ ) {
  //vvvvv THIS CODE CHANGED vvvvv
  setInterval( (function(j){ return function(){$("#looper").text(i[j]);}})(j), j*1000 );
}
</script>

The reason for this is setTimeout sets a function to be run once, while setInterval will make it run over and over like you want

answered Dec 25, 2020 at 10:23

Matthew Lin

3711 silver badge7 bronze badges

1 Comment

Harman Thind Over a year ago

Thank you for helping Matthew. The setInterval method you suggested seems really helpful to learn but the code you provided it didn't provide result as i desired. I'm keep on getting the first item in the list. I think all the other items are being displayed but very quickly and the loop starts over from first item in the list. So only first item is visible to eyes.

user14860400 · Accepted Answer · 2020-12-25 10:29:08Z

1

You have to use setInterval function..

<h1 id="looper" ></h1>

<script>
var i = ["ਸਤਿ ਸ੍ਰੀ ਅਕਾਲ", "Hello", "hola", "नमस्ते", "你好!", "Здравствуйте"];
setInterval(function(){
  for( var j = 0 ; j < i.length; j++ ) {
    setTimeout( (function(j){ return function(){$("#looper").text(i[j]);}})(j), j*1000 );
  }, 1000 * i.length);
}
</script>

answered Dec 25, 2020 at 10:29

user14860400

2 Comments

Harman Thind Over a year ago

Thanks Artem for your help. Your code actually make absolute sense to me and seems logically perfect. But it doesn't display anything when i run it on browser. Do you get proper output if you run it?

user14860400 Over a year ago

I added new one. Please check the next sample. It was syntax error. So I updated my code.

Collectives™ on Stack Overflow

How to repeat the items in array list again and again in JavaScript/HTML

3 Answers 3

3 Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related