Just another one solution for
intervals
\timeouts
viarequestAnimationFrame
.
Working well in a project that based on three.js library.
- to use
intervals
\timeouts
via requestAnimationFrame; - to avoid some time based glitches, violations;
- to control some time based actions.
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.
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
npm install
- configure your gitflow workspace like it is here
npm run prepare
(check husky documentation)
Status of Interval
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 |
Status of Intervaq
Member | Value | Description |
---|---|---|
IN_PROCESS |
1 |
in process |
PAUSED |
0 |
paused |
Status of Timeout
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 |
Interval item class
new Interval(
callback
,timeInterval
,isPaused
):Interval
Constructor.
Parameter | Type | Description |
---|---|---|
callback |
Function |
function to execute |
timeInterval |
number |
time of execution in Ms |
isPaused |
boolean |
is intervaq paused on setInterval call |
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. |
checkTimeToExecute(
timeToCheck
):void
Check its Interval for execution.
Parameter | Type | Description |
---|---|---|
timeToCheck |
number |
timestamp to check for execution |
void
void
continueExecuting(
continueAtTime
):void
Continue to execute after pause.
Parameter | Type | Description |
---|---|---|
continueAtTime |
number |
timestamp to calculate its downtime |
void
void
destroy():
void
Desctuctor functionality.
void
void
disable():
Interval
Disable execution.
this
enable():
Interval
Enable execution.
this
execute():
void
Execute the callback
function.
void
void
pauseExecuting(
pausedAtTime
):void
Set execution on pause.
Parameter | Type | Description |
---|---|---|
pausedAtTime |
number |
timestamp to set its pausedAtTime |
void
void
restart():
Interval
Restart execution.
this
Main Intervaq class
new Intervaq():
Intervaq
Constructor
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 |
checkToExecute(
timestamp
):void
Checking intervals and timeouts to execute.
Parameter | Type | Description |
---|---|---|
timestamp |
number |
timestamp (from requestAnimationFrame , etc) |
void
clearInterval(
interval
):boolean
clearInterval functionality.
Parameter | Type | Description |
---|---|---|
interval |
Interval |
object of Interval |
boolean
- done state
clearTimeout(
timeout
):boolean
clearTimeout functionality.
Parameter | Type | Description |
---|---|---|
timeout |
Timeout |
object of Timeout |
boolean
- done state
continueProcessing():
void
Continue of intervals/timeouts to execute after paused
void
void
pauseProcessing():
void
Set intervals/timeouts paused to prevent its execution
void
void
setInterval(
fnToExecute
,timeInterval
):Interval
setInterval functionality.
Parameter | Type | Description |
---|---|---|
fnToExecute |
Function |
function to execute |
timeInterval |
number |
time of execution in Ms |
- object of Interval
setTimeout(
fnToExecute
,timeOut
):Timeout
setTimeout functionality.
Parameter | Type | Description |
---|---|---|
fnToExecute |
Function |
function to execute |
timeOut |
number |
time of execution in Ms |
- object of Timeout
Timeout item class
new Timeout(
callback
,timeOut
,isPaused
):Timeout
Constructor
Parameter | Type | Description |
---|---|---|
callback |
Function |
Function to execute. |
timeOut |
number |
timestamp to check for execution. |
isPaused |
boolean |
is intervaq paused on setInterval call. |
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. |
checkTimeToExecute(
timeToCheck
):boolean
Check its Timeout for execution.
Parameter | Type | Description |
---|---|---|
timeToCheck |
number |
timestamp to check for the execution |
boolean
done state
continueExecuting(
continueAtTime
):void
Continue to execute after pause.
Parameter | Type | Description |
---|---|---|
continueAtTime |
number |
timestamp to calculate its downtime |
void
void
destroy():
void
Desctuctor functionality.
void
void
disable():
Timeout
Disable execution.
this
enable():
Timeout
Enable execution.
this
execute():
boolean
Execute the callback
function.
boolean
done state
pauseExecuting(
pausedAtTime
):void
Set execution on pause.
Parameter | Type | Description |
---|---|---|
pausedAtTime |
number |
timestamp to set its pausedAtTime |
void
void
restart():
Timeout
Restart execution.
this
Callback:
Function
callback
type of function to execute.
Timestamp:
number
Timestamp type of datetime.
dummyCallback():
null
Dummy callback to avoid calls on destruct.
null
- null
getTimestamp():
number
Returns timestamp.
number
- timestamp
- 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