setTimeout() method inside a while loop with boolean break

Question

I have a function "fill" which fills an array with numbers, and I want to do it as long as this array has empty values. But it want a delay of one second for each number.

I found here on stackoverflow a solution for how to use setTimeOut with loop, but my problem is different, as the loop will break depending on a boolean. This is what I got so far, using the same idea:

  var fillCache = function () {
        var i = state.cache.indexOf("")
        while (i !== -1) {
            (function (i) {
                setTimeout(function () { fill }, 1000)
            })
            i = state.cache.indexOf("")
        }
    }

What I get is an error saying "expected an assignment or function call and instead saw an expression" for Line 4. Any idea? Or am I completely wrong?

Other issues aside, your loop is going to block the event loop so no other JS will run so `state.cache` will never change, so the loop will never end. — Quentin, Sep 08 '21 at 08:47

score 1 · Accepted Answer · answered Sep 08 '21 at 08:48

There are three problems there:

while is a synchronous operation, but you have an asynchronous operation that you want to repeat until a specific condition is met, so while isn't the right choice. In fact, as Quentin points out, it will prevent the condition from becoming true because, since it's synchronous and never-ending, it never lets anything else happen.
You never call the inline-invoked function expression in the loop.
In the setTimeout callback, you never call fill, you just refer to it, which (in this case) doesn't do anything.

You probably want a setTimeout that calls itself, something like this:

const fillCache = function () {
    // When called, start the process
    tick();

    // Handles each tick
    function tick() {
        // Is the condition true?
        if (state.cache.indexOf("") !== -1) {
            // Not yet, call `fill`...
            fill();
            // ...and go again in a second
            setTimeout(tick, 1000);
        }
    }
};

Thank you, this works! My problem now is that the array, which is displayed in another component, does not refresh. Any idea? — Gustavo, Sep 08 '21 at 09:02
@Gustavo - Sounds like you're not storing the array in state / providing it as a prop, or you are doing one of those things but not updating it correctly. If it's an update issue, [see this question's answers](https://stackoverflow.com/questions/26253351/correct-modification-of-state-arrays-in-react-js). — T.J. Crowder, Sep 08 '21 at 09:13

setTimeout() method inside a while loop with boolean break

1 Answers1