File tree Expand file tree Collapse file tree 1 file changed +12
-13
lines changed
documentation/examples/20-7guis/04-7guis-timer Expand file tree Collapse file tree 1 file changed +12
-13
lines changed Original file line number Diff line number Diff line change 1
1
<!-- https://eugenkiss.github.io/7guis/tasks#timer -->
2
2
3
3
<script >
4
- import { onDestroy } from ' svelte' ;
4
+ import { onMount } from ' svelte' ;
5
5
6
6
let elapsed = 0 ;
7
7
let duration = 5000 ;
8
8
9
- let last_time = window . performance . now ();
10
- let frame ;
9
+ onMount (() => {
10
+ let last_time = performance . now () ;
11
11
12
- (function update () {
13
- frame = requestAnimationFrame (update);
12
+ let frame = requestAnimationFrame (function update (time ) {
13
+ frame = requestAnimationFrame (update);
14
14
15
- const time = window .performance .now ();
16
- elapsed += Math .min (time - last_time, duration - elapsed);
15
+ elapsed += Math .min (time - last_time, duration - elapsed);
16
+ last_time = time;
17
+ });
17
18
18
- last_time = time;
19
- })();
20
-
21
- onDestroy (() => {
22
- cancelAnimationFrame (frame);
19
+ return () => {
20
+ cancelAnimationFrame (frame);
21
+ };
23
22
});
24
23
</script >
25
24
26
25
<label >
27
26
elapsed time:
28
- <progress value ={elapsed / duration } / >
27
+ <progress value ={elapsed / duration }></ progress >
29
28
</label >
30
29
31
30
<div >{(elapsed / 1000 ).toFixed (1 )}s</div >
You can’t perform that action at this time.
0 commit comments