This will repetitively invoke a function or evaluate an expression with a given (static) duration (millisecond).
To set different (dynamic) duration, we need to stop the current timer, using
clearInterval(), then re-run the timer.
This will delay a function call or an expression evaluation with a given duration (millisecond), for just one time (no repetition). The timeout can be reset with
Neither one above has option to set different duration on each execution.
But, we can initiate first duration, then clear the timer, modify the duration, then rerun the timer. Essentially, create a conventional loop to wrap the timer we use. So that we can clear and rerun the timer repetitively.
In the coding below, I implemented the
setInterval. But, actually it should use
setTimeout. Explanation below the coding. For now, let's see it.
In that typing above, the timer is reset repetitively using
clearInterval until the index reaches the limit given.
That way, we can set new different duration on each invocation.
This idea is actually creating a LOOP, not based on the
setInterval repetition itself. There's no way to do it solely depending on
setInterval, we need "something" to wrap it, like, a loop-er. It can be a defined function, or using
for loop block. The title above is invalid of course. I'm not sure what's the correct term, but the word "loop" should be in it.
So, using a function, I create a loop of that function, rerun from within the function block if it hasn't reached a given limit/condition. And between executions, there's a (dynamic) time interval (pause), using the
multiplier (fixed) combined with the
i (variable). The pause should be done using
Uh, so the coding above,
clearInterval can be safely (should be) replaced with
clearTimeout, because it's called once and then cleared right away. Hence, the invalid title. Oh well.
Anyhow, this is the skeleton of looping using a function:
Be thorough when defining the condition, loop break condition. Because, if it never reaches the expectation, the loop will go infinitely. A fixed limit as loop safeguard is recommended for testing. As such:
The basic styling (CSS)
Why do I wanna create different duration?
That is an interesting query.