How to get all messages from an array with setInterval (Javascript) [solved] | SoloLearn: Learn to code for FREE!

+3

How to get all messages from an array with setInterval (Javascript) [solved]

I want to get all the messages one by one every 2 seconds and repeat again and again, but only the last message is visible. I tried a lot, but didn't get its logic. Please tell me how to fix it. Trial code: https://code.sololearn.com/Wsa9AMptTJSX/?ref=app

19 Answers

New Answer

+11

Use it. setInterval(function(){ for (let i = 0; i < msgs.length; i++){ head.innerHTML += msgs[i]+"<br>"; } }, 2000)

+9

Mirielle[ INACTIVE ] But mam why you using hard method...it can be done easily...

+7

Check it πŸ’• Prasant πŸ’• ✳️ https://code.sololearn.com/WrR3A91a6tZx/?ref=app

+7

The most effective and performance friendly method is to use RAF https://code.sololearn.com/WouM2MgcCJcw/?ref=app

+6

Your current code in english: Every 2 soconds call a function that iterates the array and assign each of its values to the innerHTML of the #head element. The iteration occurs inmediately, it just overrides the innerHTML over and over until the last element(the output) is reached. What you need in english: Every 2 seconds call a function that, somehow, keeps track of the index of the current element to be displayed, and prints it. Then it increments the index so that the function prints the next element when it's called again. Code: var i=0 setInterval(function(){ head.innerHTML = msgs[i]; i++ }, 2000) SAYEDπŸ‡§πŸ‡©πŸ‡§πŸ‡© I think using a loop that way is confusing.

+6

https://code.sololearn.com/Wkpd8MpGRv7W/?ref=app Hope you need something like this i done all things in one line just look at line 14 if you don't understand then mention me

+5

RAF = requestAnimationFrame This is a more robust way of handling animations as opposed to the old and laggy setInterval. Also, new Date().getTime() returns the number of milliseconds that has elapsed since January 1, 1970. Calling two of this and calculate their differences will returns the total number of milliseconds that has elapsed between those two calls

+3

SAYEDπŸ‡§πŸ‡©πŸ‡§πŸ‡© No, I didn't mean that. I want to change the inner text of that h1 tag with all the messages from that array one by one repeatedly after every 2 seconds. Not to add new texts

+3

Mirielle[ INACTIVE ] You used Date() for it ! 😳 what is the full form of RAF ? Thank you so much 😊

+3

I won't solve your issue as it's already been solved but I wanna say DO NOT USE SETINTERVAL. That's the worst thing you could do and different browsers have different down-sides for setInterval. Rather, use setTimeout. It's much more efficient and convenient.

+3

+3

πŸ’• Prasant πŸ’• ✳️ take a look at https://www.thecodeship.com/web-development/alternative-to-javascript-evil-setinterval/ you don't need to apply the same interval function there but just get an idea of why it's not a great thing to use setInterval.

+3

πŸ’• Prasant πŸ’• ✳️ I forgot abt your question. I believe most browsers or, at least, most modern browsers support it since it's become part of JS. However refer to the link in my previous comment to see why it's a better idea to stop using it

+2

πŸ’• Prasant πŸ’• ✳️ try this: setInterval(function(){ head.innerHTML = msgs.shift(); } }, 2000)

+1

+1

πŸ’• Prasant πŸ’• ✳️ if you want to restart from the beginning it will be like this: setInterval(function(){ head.innerHTML = msgs.shift(); msgs.push(head.innerHTML); }, 2000);

+1

0

o.gak Thank you sir I didn't know the use of .shift() method But when I uaed it, it shows undefined when the iteration ends instead of repeating from the beginning.

0