Skip to content

Commit c5028a2

Browse files
docs: Update 7guis-timer example to support SSR context (#13356)
* Update 7guis-timer * remove window reference on variable init * better still * prettier --------- Co-authored-by: Rich Harris <[email protected]> Co-authored-by: Rich Harris <[email protected]>
1 parent c5fa0b4 commit c5028a2

File tree

1 file changed

+12
-13
lines changed
  • documentation/examples/20-7guis/04-7guis-timer

1 file changed

+12
-13
lines changed

documentation/examples/20-7guis/04-7guis-timer/App.svelte

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,30 @@
11
<!-- https://eugenkiss.github.io/7guis/tasks#timer -->
22

33
<script>
4-
import { onDestroy } from 'svelte';
4+
import { onMount } from 'svelte';
55
66
let elapsed = 0;
77
let duration = 5000;
88
9-
let last_time = window.performance.now();
10-
let frame;
9+
onMount(() => {
10+
let last_time = performance.now();
1111
12-
(function update() {
13-
frame = requestAnimationFrame(update);
12+
let frame = requestAnimationFrame(function update(time) {
13+
frame = requestAnimationFrame(update);
1414
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+
});
1718
18-
last_time = time;
19-
})();
20-
21-
onDestroy(() => {
22-
cancelAnimationFrame(frame);
19+
return () => {
20+
cancelAnimationFrame(frame);
21+
};
2322
});
2423
</script>
2524

2625
<label>
2726
elapsed time:
28-
<progress value={elapsed / duration} />
27+
<progress value={elapsed / duration}></progress>
2928
</label>
3029

3130
<div>{(elapsed / 1000).toFixed(1)}s</div>

0 commit comments

Comments
 (0)