interval()
The interval() function creates a Flow object that repeatedly triggers, with a fixed delay between each call, similar to setInterval().
Syntax
interval(duration);
Parameters
- duration
- The time (in milliseconds) that the repeated delay should take.
Note: For animations and other frame-based operations, use frame() instead.
Return value
A Flow object that triggers in regular intervals of duration milliseconds. The trigger does not receive arguments.
Details
Functionally, interval() is equivalent to the native setInterval(), but there are some differences. For one, the syntax is slightly different, in the sense that setInterval takes a callback, whereas the .then() method is needed to hook into interval(). Secondly, Flow objects provide some methods that could be helpful for intervals (such as .until()), which makes some code easier to write and maintain. Lastly, flows are monitored, and so usage in monitored contexts simplifies things. To demonstrate, let's look at some examples.
Examples
The blink tag
Let's, for learning's sake, reimplement the long deprecated HTML <blink> tag (we'll name it <re-blink>). It will simply blink in and and out of existance every second (1000ms). To do this, we'll be toggling the hidden attribute on the element itself, like so:
<title>re-blink</title>
<script>
connected(() => {
interval(1000).then(() => {
this.hidden = !this.hidden;
});
});
</script>
<style>
re-blink {
display: inline;
}
re-blink[hidden]{
opacity: 0;
}
</style>
Specifically, if we'd used setInterval() instead of interval(), then upon removing and adding the element back to the DOM, the element would start blinking more, and more irregularly, since the intervals would not be properly cleaned up and therefore overlap. With interval() on the other hand, we don't need to worry about this.
Limiting triggers
In this example, we'll write some code that logs 0 through 4 over the span of two seconds. Let's say we want the logging to happen not only every 500ms, but the first log should happen immediately rather than after a delay. To achieve this, we'll be using .until() to limit the amount of triggers, combined with .now() for the initial trigger:
let number = 0;
interval(500).then(() => {
console.log(number);
number++;
}).until(() => number > 4).now();
Alternatively, we can use .until(timeout(2000)), if we don't want to keep track of the number of triggers that have happened (though in some browsers, this is subject to timer inaccuracies; we may need something like timeout(2100)).
Note: while it is possible to use interval() in conjunction with .once(), it is more appropriate to use timeout() for that behavior.
Usage notes
To manually stop intervals (without relying on .until() or monitored contexts), use the flow.stop() method.
See also