Intervaq
Just another one solution for
intervals
\timeouts
viarequestAnimationFrame
.
Working well in a project that based on three.js library.
Test coverage:
Why:
- to use
intervals
\timeouts
via requestAnimationFrame; - to avoid some time based glitches, violations;
- to control some time based actions.
Some info to use:
-
intervaq
:-
.checkToExecute(timestamp)
inrequestAnimationFrame
callback body; -
.setInterval(callback, timeMs)
/.clearInterval(interval)
as usual; -
.setTimeout(callback, timeMs)
/.clearTimeout(timeout)
as usual; -
.pauseProcessing()
/.continueProcessing()
when its necessary;
-
-
intervaq
.intervals
/timeouts
:-
.pauseExecuting(currentTimeInt)
and.continueExecuting(currentTimeInt)
manually; -
.disable()
/.enable()
/.restart()
manually.
-
Usage:
some sample (TypeScript):
import {Intervaq, Timestamp} from 'intervaq';
// init intervaq object
const intervaq = new Intervaq();
// using intervaq via requestAnimationFrame
function animate(timestamp?: Timestamp) {
// process intervaq
if (timestamp && intervaq !== undefined) {
intervaq.checkToExecute(timestamp);
}
requestAnimationFrame(animate);
}
// to control visibility state
document.addEventListener('visibilitychange', onVisibilityChange);
function onVisibilityChange(event: Event) {
const target = event.target as Document;
if (target.visibilityState === 'visible') {
console.log(`tab is active at ${new Date().getTime()} `);
// continue processing
intervaq.continueProcessing();
} else {
console.log(`tab is inactive at ${new Date().getTime()} `);
// pause processing
intervaq.pauseProcessing();
}
}
// intervaq.setInterval case:
let testIntervalValue = 0;
const testInterval = intervaq.setInterval(() => {
console.log(
`testInterval every 1000ms #${testIntervalValue} at ${new Date().getTime()} `
);
testIntervalValue++;
}, 1000);
// intervaq.setTimeout case:
const testTimeoutValue = 0;
const testTimeout = intervaq.setTimeout(() => {
// disable its testInterval
intervaq.clearInterval(testInterval);
console.log(
`testTimeout in 5500ms #${testTimeoutValue} at ${new Date().getTime()} `
);
// !not important
intervaq.clearTimeout(testTimeout);
}, 5500);
// action
animate();
output sample 0:
testInterval every 1000ms #0 at 1689861750168
testInterval every 1000ms #1 at 1689861751169
testInterval every 1000ms #2 at 1689861752184
testInterval every 1000ms #3 at 1689861753184
testInterval every 1000ms #4 at 1689861754201
testTimeout in 5500ms #0 at 1689861754667
output sample 1 (on tabs switching):
testInterval every 1000ms #0 at 1689877224270
testInterval every 1000ms #1 at 1689877225287
tab is inactive at 1689877226100
tab is active at 1689877230127
testInterval every 1000ms #2 at 1689877230319
tab is inactive at 1689877231240
tab is active at 1689877234740
testInterval every 1000ms #3 at 1689877234820
testInterval every 1000ms #4 at 1689877235821
testTimeout in 5500ms #0 at 1689877236288
Dev:
npm install
- configure your gitflow workspace like it is here
-
npm run prepare
(check husky documentation)
Documentation:
Enumerations
Classes
Type Aliases
Functions
Enumerations
StatusInterval
Status of Interval
Enumeration Members
Member | Value | Description |
---|---|---|
DISABLED |
2 |
disabled for execution |
DONE |
4 |
execution done |
EXECUTING |
3 |
execution is processing |
IN_PROCESS |
1 |
in process |
PAUSED |
0 |
paused |
StatusIntervaq
Status of Intervaq
Enumeration Members
Member | Value | Description |
---|---|---|
IN_PROCESS |
1 |
in process |
PAUSED |
0 |
paused |
StatusTimeout
Status of Timeout
Enumeration Members
Member | Value | Description |
---|---|---|
DISABLED |
3 |
disabled for execution |
DONE |
2 |
execution done |
EXECUTING |
4 |
execution is processing |
IN_PROCESS |
1 |
in process |
PAUSED |
0 |
paused |
Classes
Interval
Interval item class
Constructors
new Interval
new Interval(
callback
,timeInterval
,isPaused
):Interval
Constructor.
Parameters
Parameter | Type | Description |
---|---|---|
callback |
Function |
function to execute |
timeInterval |
number |
time of execution in Ms |
isPaused |
boolean |
is intervaq paused on setInterval call |
Returns
Defined In
Properties
Property | Type | Description |
---|---|---|
_callback |
Function |
callback function to execute. |
executeAtTime |
null | number
|
timestamp of next execution iteration. |
pausedAtTime |
null | number
|
null or timestamp when current interval is paused. |
prevTime |
null | number
|
timestamp of its prev execution iteration. |
status |
StatusInterval |
Status value. |
timeInterval |
null | number
|
Int time in Ms of its interval execution. |
Methods
checkTimeToExecute
checkTimeToExecute(
timeToCheck
):void
Check its Interval for execution.
Parameters
Parameter | Type | Description |
---|---|---|
timeToCheck |
number |
timestamp to check for execution |
Returns
void
void
Defined In
continueExecuting
continueExecuting(
continueAtTime
):void
Continue to execute after pause.
Parameters
Parameter | Type | Description |
---|---|---|
continueAtTime |
number |
timestamp to calculate its downtime |
Returns
void
void
Defined In
destroy
destroy():
void
Desctuctor functionality.
Returns
void
void
Defined In
disable
disable():
Interval
Disable execution.
Returns
this
Defined In
enable
enable():
Interval
Enable execution.
Returns
this
Defined In
execute
execute():
void
Execute the callback
function.
Returns
void
void
Defined In
pauseExecuting
pauseExecuting(
pausedAtTime
):void
Set execution on pause.
Parameters
Parameter | Type | Description |
---|---|---|
pausedAtTime |
number |
timestamp to set its pausedAtTime
|
Returns
void
void
Defined In
restart
restart():
Interval
Restart execution.
Returns
this
Defined In
Intervaq
Main Intervaq class
Constructors
new Intervaq
new Intervaq():
Intervaq
Constructor
Returns
Defined In
Properties
Property | Type | Description |
---|---|---|
intervals |
Interval [] |
Array of Intervals |
pausedAt |
null | number
|
null or timestamp when Intervaq is paused |
status |
StatusIntervaq |
Status value |
timeouts |
Timeout [] |
Array of Timeouts |
Methods
checkToExecute
checkToExecute(
timestamp
):void
Checking intervals and timeouts to execute.
Parameters
Parameter | Type | Description |
---|---|---|
timestamp |
number |
timestamp (from requestAnimationFrame , etc) |
Returns
void
Defined In
clearInterval
clearInterval(
interval
):boolean
clearInterval functionality.
Parameters
Parameter | Type | Description |
---|---|---|
interval |
Interval |
object of Interval |
Returns
boolean
- done state
Defined In
clearTimeout
clearTimeout(
timeout
):boolean
clearTimeout functionality.
Parameters
Parameter | Type | Description |
---|---|---|
timeout |
Timeout |
object of Timeout |
Returns
boolean
- done state
Defined In
continueProcessing
continueProcessing():
void
Continue of intervals/timeouts to execute after paused
Returns
void
void
Defined In
pauseProcessing
pauseProcessing():
void
Set intervals/timeouts paused to prevent its execution
Returns
void
void
Defined In
setInterval
setInterval(
fnToExecute
,timeInterval
):Interval
setInterval functionality.
Parameters
Parameter | Type | Description |
---|---|---|
fnToExecute |
Function |
function to execute |
timeInterval |
number |
time of execution in Ms |
Returns
- object of Interval
Defined In
setTimeout
setTimeout(
fnToExecute
,timeOut
):Timeout
setTimeout functionality.
Parameters
Parameter | Type | Description |
---|---|---|
fnToExecute |
Function |
function to execute |
timeOut |
number |
time of execution in Ms |
Returns
- object of Timeout
Defined In
Timeout
Timeout item class
Constructors
new Timeout
new Timeout(
callback
,timeOut
,isPaused
):Timeout
Constructor
Parameters
Parameter | Type | Description |
---|---|---|
callback |
Function |
Function to execute. |
timeOut |
number |
timestamp to check for execution. |
isPaused |
boolean |
is intervaq paused on setInterval call. |
Returns
Defined In
Properties
Property | Type | Description |
---|---|---|
_callback |
Function |
callback function to execute. |
executeAtTime |
null | number
|
timestamp of next execution iteration. |
pausedAtTime |
null | number
|
null or timestamp when current interval is paused. |
prevTime |
null | number
|
null (initial) or timestamp of its prev execution iteration. |
status |
StatusTimeout |
Status value. |
timeOut |
null | number
|
Int time in Ms of its timeout execution. |
Methods
checkTimeToExecute
checkTimeToExecute(
timeToCheck
):boolean
Check its Timeout for execution.
Parameters
Parameter | Type | Description |
---|---|---|
timeToCheck |
number |
timestamp to check for the execution |
Returns
boolean
done state
Defined In
continueExecuting
continueExecuting(
continueAtTime
):void
Continue to execute after pause.
Parameters
Parameter | Type | Description |
---|---|---|
continueAtTime |
number |
timestamp to calculate its downtime |
Returns
void
void
Defined In
destroy
destroy():
void
Desctuctor functionality.
Returns
void
void
Defined In
disable
disable():
Timeout
Disable execution.
Returns
this
Defined In
enable
enable():
Timeout
Enable execution.
Returns
this
Defined In
execute
execute():
boolean
Execute the callback
function.
Returns
boolean
done state
Defined In
pauseExecuting
pauseExecuting(
pausedAtTime
):void
Set execution on pause.
Parameters
Parameter | Type | Description |
---|---|---|
pausedAtTime |
number |
timestamp to set its pausedAtTime
|
Returns
void
void
Defined In
restart
restart():
Timeout
Restart execution.
Returns
this
Defined In
Type Aliases
Callback
Callback:
Function
callback
type of function to execute.
Defined In
Timestamp
Timestamp:
number
Timestamp type of datetime.
Defined In
Functions
dummyCallback
dummyCallback():
null
Dummy callback to avoid calls on destruct.
Returns
null
- null
Defined In
getTimestamp
getTimestamp():
number
Returns timestamp.
Returns
number
- timestamp
Defined In
TODO:
- [ ] apply some pattern... maybe...
- [ ] modify some
checkToExecute
functionality - [ ] chck
clearInterval
\clearTimeout
onexecutionInProcess
- [ ] try to keep pausing at its
Intervaq
class only - [ ] do smth with
destroy
method - [ ] check some scope executing
- [ ] do smtn good with docs