+ 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

2nd Dec 2020, 3:50 AM
Prasant
Prasant - avatar
19 Answers
+ 11
Use it. setInterval(function(){ for (let i = 0; i < msgs.length; i++){ head.innerHTML += msgs[i]+"<br>"; } }, 2000)
2nd Dec 2020, 4:09 AM
TOLUENE
TOLUENE - avatar
+ 9
Mirielle[ INACTIVE ] But mam why you using hard method...it can be done easily...
2nd Dec 2020, 11:31 AM
ㅤㅤㅤ
+ 7
The most effective and performance friendly method is to use RAF https://code.sololearn.com/WouM2MgcCJcw/?ref=app
2nd Dec 2020, 9:33 AM
Mirielle
Mirielle - avatar
+ 7
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
3rd Dec 2020, 5:54 AM
Jiya
Jiya - avatar
+ 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.
2nd Dec 2020, 4:42 AM
Kevin ★
+ 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
2nd Dec 2020, 10:04 AM
Mirielle
Mirielle - avatar
+ 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
2nd Dec 2020, 4:13 AM
Prasant
Prasant - avatar
+ 3
Mirielle[ INACTIVE ] You used Date() for it ! 😳 what is the full form of RAF ? Thank you so much 😊
2nd Dec 2020, 9:55 AM
Prasant
Prasant - avatar
+ 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.
2nd Dec 2020, 11:46 AM
Coal
+ 3
Cryptic Art Is the setInterval not supported in some browsers ?
2nd Dec 2020, 1:38 PM
Prasant
Prasant - avatar
+ 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.
2nd Dec 2020, 3:22 PM
Coal
+ 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
2nd Dec 2020, 3:24 PM
Coal
+ 2
💕 Prasant 💕 ✳️ try this: setInterval(function(){ head.innerHTML = msgs.shift(); } }, 2000)
2nd Dec 2020, 4:52 AM
o.gak
o.gak - avatar
+ 1
Thank you so much all for helping me 😊
2nd Dec 2020, 5:13 AM
Prasant
Prasant - avatar
+ 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);
2nd Dec 2020, 2:48 PM
o.gak
o.gak - avatar
+ 1
Jiya 💙💙 Thank you ☺️ I understood
3rd Dec 2020, 6:18 AM
Prasant
Prasant - avatar
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.
2nd Dec 2020, 5:15 AM
Prasant
Prasant - avatar
0
o.gak thank you 😊
2nd Dec 2020, 3:17 PM
Prasant
Prasant - avatar