JavaScript: Setting Dynamic Duration of setInterval

JavaScript has two timing methods:

• setInterval(function[or]expression, duration)

  Description:

  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.

• setTimeout(function[or]expression, duration)

  Description:

  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 clearTimeout().

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.

---

DEMO

---

JavaScript

This is the JavaScript I typed earlier → updated Aug 19, 2018.

(function (d, w) { "use strict"; var g = function (a) { return d.getElementById(a); }; var monitor = g("monitor"); var button = g("button"); var i = -1; //index (for looping purpose) var interval; //for setInterval var duration; //for setInterval duration var limit = 10; //this is the repetition limit var multiplier = 100; //the duration multiplier function appear() { //define a function i += 1; //increment the index duration = i * multiplier; interval = w.setInterval(function () { monitor.innerHTML += i + " <small style='color:red'><em>(duration: " + duration + "ms)►</em></small> "; w.clearInterval(interval); //clear if (i < limit) { appear(); //re-run } else { //notification on complete monitor.innerHTML += " <span style='color:royalblue'>(done)</span>"; button.disabled = 0; i = -1; //reset } }, duration); } //button button.onclick = function () { button.disabled = 1; //disable the button trigger if (monitor.innerHTML.length > 0) { monitor.innerHTML = ""; //clear monitor } appear(); //call the function }; }(document, window));

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 do-while, while, or 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 setTimeout.

Uh, so the coding above, setInterval and clearInterval can be safely (should be) replaced with setTimeout and clearTimeout, because it's called once and then cleared right away. Hence, the invalid title. Oh well.

Side note

Anyhow, this is the skeleton of looping using a function:

function repeat() { // do something here to improve current condition... if (condition === false) { // expectation hasn't been reached repeat(); // rerun the function } else { // stop, go to other function or display something } } repeat(); // run function for the very first time

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:

var safeguard = 1000; // looping limit var counter = 0; // loop counter function repeat() { counter += 1; if (counter < safeguard) { // do something here to improve current condition... if (condition === false) { repeat(); } else { // stop } } else { // break, then say something on console perhaps } } repeat();

---

HTML elements

<div class="m" id="monitor"></div> <div style="text-align:center"> <button type="button" id="button" class="b">Click</button> </div>

---

The basic styling (CSS)

body { font-family:consolas, courier,monospace; text-align:center; font-size:18px; overflow: hidden; color:#000; background:#eee; } .m { margin:20px 0; min-height:100px; background:#fff; padding:20px; border-radius:20px; box-sizing:border-box; } .b { font-size:2em; }

---

Why do I wanna create different duration?

That is an interesting query.

---

Links

• The independent page of that demo over there
• The other hilarious example using both setInterval and setTimeout, but with additional thingies, at Thor
• The neato answer about setting dynamic duration using setTimeout timing method on Stack Overflow