Running a loop multiple times automatically with vanilla JS

Question

I have succeeded in cobbling together pieces of code that achieve my goal. However, I would like some advice from more advanced vanilla JS programmers on how I can go about reaching my goal in a better way.

To start, I want to introduce my problem. I have a piece of text on my website where a portion is designed to change every so often. For this, I am running through a loop of phrases. To run this loop continuously, I first call the loop, then I call it again with setInterval timed to start when the initial loop ends. Here is the code I've got, which works even if it isn't what could be considered quality code:

function loop(){

for (let i = 0; i < header_phrases.length; i++){
    (function (i) {
        setTimeout(function(){
          header_txt.textContent =  header_phrases[i];
        }, 3000 * i);
    })(i);
};
}

loop();
setInterval(loop, 21000);

Is there a better way to right this code for both performance and quality? Do I need to use async? If so, any material I can see to learn more? Thanks!

oosniss · Accepted Answer · 2018-09-13 02:05:56Z

1

You can implement the same logic using recursion.

function recursify(phrases, index = 0) {
    header_txt.textContent = phrases[index];
    setTimeout(function () {
        recursify(phrases, index < phrases.length - 1 ? index + 1 : 0);
    }, 300)
}

recursify(header_phrases);

The function 'recursify' will call itself after 300 miliseconds, but everytime this function gets called, the value of index will be different.

answered Sep 13, 2018 at 2:05

oosniss

4601 gold badge7 silver badges14 bronze badges

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

2 Comments

user47589 Over a year ago

It isn't recursion if the function is called from setTimeout. It is always at the top of the call stack.

Kaiido Over a year ago

@Amy what do you mean exactly? Ok, the function doesn't call itself directly, but the process invoked is recursive.

Manngo · Accepted Answer · 2018-09-13 02:08:14Z

0

If I understand your requirement correctly, you want top populate an element from an array of values.

A simple way to do this is:

doLoop();
function doLoop() {
    var phraseNo=0;
    setTimeout(next,21000);
    next();
    function next() {
        header_txt.textContent =  header_phrases[phraseNo++];
        if(phraseNo>=header_phrases.length) phraseNo=0;
    }
}

This simply puts the next() function on the queue and waits.

The call to next() before the function simply starts it off without waiting for the timeout.

answered Sep 13, 2018 at 2:08

Manngo

17k13 gold badges109 silver badges153 bronze badges

1 Comment

Kaiido Over a year ago

That's merely two calls, not a loop.

denov · Accepted Answer · 2018-09-13 02:29:44Z

0

this is assuming that header_txt and header_phrases are not global vars. using global vars isn't a good idea.

var repeatIn = 3000;
phraseUpdater();

function phraseUpdater() {
    var updateCount = 0,
        phrasesCount = header_phrases.length;

    setHeader();
    setTimeout(setHeader, repeatIn);
    function setHeader() {
        header_txt.textContent = header_phrases[updateCount++ % phrasesCount] || '';
    }
}

answered Sep 13, 2018 at 2:29

denov

13k2 gold badges32 silver badges45 bronze badges

Collectives™ on Stack Overflow

Running a loop multiple times automatically with vanilla JS

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related