Intervaq

Just another one solution for intervals \ timeouts via requestAnimationFrame.

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) in requestAnimationFrame 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

• StatusInterval
• StatusIntervaq
• StatusTimeout

Classes

• Interval
• Intervaq
• Timeout

Type Aliases

• Callback
• Timestamp

Functions

• dummyCallback
• getTimestamp

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

Interval

Defined In

index.ts:249

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

index.ts:272

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

index.ts:312

destroy

destroy(): void

Desctuctor functionality.

Returns

void

void

Defined In

index.ts:354

disable

disable(): Interval

Disable execution.

Returns

Interval

this

Defined In

index.ts:324

enable

enable(): Interval

Enable execution.

Returns

Interval

this

Defined In

index.ts:333

execute

execute(): void

Execute the callback function.

Returns

void

void

Defined In

index.ts:291

pauseExecuting

pauseExecuting(pausedAtTime): void

Set execution on pause.

Parameters

| Parameter | Type | Description | | :------ | :------ | :------ | | pausedAtTime | number | timestamp to set its pausedAtTime |

Returns

void

void

Defined In

index.ts:302

restart

restart(): Interval

Restart execution.

Returns

Interval

this

Defined In

index.ts:346

Intervaq

Main Intervaq class

Constructors

new Intervaq

new Intervaq(): Intervaq

Constructor

Returns

Intervaq

Defined In

index.ts:69

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

index.ts:139

clearInterval

clearInterval(interval): boolean

clearInterval functionality.

Parameters

| Parameter | Type | Description | | :------ | :------ | :------ | | interval | Interval | object of Interval |

Returns

boolean

• done state

Defined In

index.ts:94

clearTimeout

clearTimeout(timeout): boolean

clearTimeout functionality.

Parameters

| Parameter | Type | Description | | :------ | :------ | :------ | | timeout | Timeout | object of Timeout |

Returns

boolean

• done state

Defined In

index.ts:125

continueProcessing

continueProcessing(): void

Continue of intervals/timeouts to execute after paused

Returns

void

void

Defined In

index.ts:177

pauseProcessing

pauseProcessing(): void

Set intervals/timeouts paused to prevent its execution

Returns

void

void

Defined In

index.ts:160

setInterval

setInterval(fnToExecute, timeInterval): Interval

setInterval functionality.

Parameters

| Parameter | Type | Description | | :------ | :------ | :------ | | fnToExecute | Function | function to execute | | timeInterval | number | time of execution in Ms |

Returns

Interval

• object of Interval

Defined In

index.ts:79

setTimeout

setTimeout(fnToExecute, timeOut): Timeout

setTimeout functionality.

Parameters

| Parameter | Type | Description | | :------ | :------ | :------ | | fnToExecute | Function | function to execute | | timeOut | number | time of execution in Ms |

Returns

Timeout

• object of Timeout

Defined In

index.ts:110

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

Timeout

Defined In

index.ts:423

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

index.ts:446

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

index.ts:483

destroy

destroy(): void

Desctuctor functionality.

Returns

void

void

Defined In

index.ts:525

disable

disable(): Timeout

Disable execution.

Returns

Timeout

this

Defined In

index.ts:495

enable

enable(): Timeout

Enable execution.

Returns

Timeout

this

Defined In

index.ts:504

execute

execute(): boolean

Execute the callback function.

Returns

boolean

done state

Defined In

index.ts:461

pauseExecuting

pauseExecuting(pausedAtTime): void

Set execution on pause.

Parameters

| Parameter | Type | Description | | :------ | :------ | :------ | | pausedAtTime | number | timestamp to set its pausedAtTime |

Returns

void

void

Defined In

index.ts:473

restart

restart(): Timeout

Restart execution.

Returns

Timeout

this

Defined In

index.ts:517

Type Aliases

Callback

Callback: Function

callback type of function to execute.

Defined In

index.ts:18

Timestamp

Timestamp: number

Timestamp type of datetime.

Defined In

index.ts:22

Functions

dummyCallback

dummyCallback(): null

Dummy callback to avoid calls on destruct.

Returns

null

• null

Defined In

index.ts:13

getTimestamp

getTimestamp(): number

Returns timestamp.

Returns

number

• timestamp

Defined In

index.ts:5

TODO:

• [ ] apply some pattern... maybe...
• [ ] modify some checkToExecute functionality
• [ ] chck clearInterval \ clearTimeout on executionInProcess
• [ ] try to keep pausing at its Intervaq class only
• [ ] do smth with destroy method
• [ ] check some scope executing
• [ ] do smtn good with docs

© kostix.dev