-
Notifications
You must be signed in to change notification settings - Fork 0
/
useTimer.ts
68 lines (64 loc) · 1.92 KB
/
useTimer.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
import { useEffect, useRef } from "react";
/**
* Advanced timer which supports both `interval` and `timeout`.
*
* @param {() => void} onInterval Will be called on each interval.
* @param {number} interval The interval time in `milliseconds`.
* @param {() => void} onTimeout Will be called when the timeout is reached.
* @param {number} timeout The timeout in `milliseconds`.
* @param {boolean} [pause=false] Indicates whether the timer should be paused.
*/
export function useTimer(
onInterval: () => void,
interval: number,
onTimeout: () => void,
timeout: number,
pause: boolean = false
)
{
const ref = useRef({ onInterval, onTimeout, timeRemaining: timeout });
// Updates when the timeout is changed.
useEffect(() =>
{
ref.current.timeRemaining = timeout;
}, [timeout]);
// Updates when the callbacks are changed.
useEffect(() =>
{
ref.current.onInterval = onInterval;
}, [onInterval]);
useEffect(() =>
{
ref.current.onTimeout = onTimeout;
}, [onTimeout]);
useEffect(() =>
{
if (!pause)
{
if (ref.current.timeRemaining <= 0)
{
ref.current.onTimeout();
return;
}
else
{
// Starts a new timer when the interval or pause is changed.
const timer = setInterval(() =>
{
ref.current.timeRemaining -= interval;
if (ref.current.timeRemaining <= 0)
{
clearInterval(timer);
ref.current.onTimeout();
}
else
{
ref.current.onInterval();
}
}, interval);
return () => { clearInterval(timer); };
}
}
return;
}, [interval, pause]);
}