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 <hello@rich-harris.dev>
Co-authored-by: Rich Harris <rich.harris@vercel.com>
pull/13348/head
sacrosanctic 2 months ago committed by GitHub
parent c5fa0b46e1
commit c5028a27c5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

@ -1,31 +1,30 @@
<!-- https://eugenkiss.github.io/7guis/tasks#timer -->
<script>
import { onDestroy } from 'svelte';
import { onMount } from 'svelte';
let elapsed = 0;
let duration = 5000;
let last_time = window.performance.now();
let frame;
onMount(() => {
let last_time = performance.now();
(function update() {
frame = requestAnimationFrame(update);
let frame = requestAnimationFrame(function update(time) {
frame = requestAnimationFrame(update);
const time = window.performance.now();
elapsed += Math.min(time - last_time, duration - elapsed);
elapsed += Math.min(time - last_time, duration - elapsed);
last_time = time;
});
last_time = time;
})();
onDestroy(() => {
cancelAnimationFrame(frame);
return () => {
cancelAnimationFrame(frame);
};
});
</script>
<label>
elapsed time:
<progress value={elapsed / duration} />
<progress value={elapsed / duration}></progress>
</label>
<div>{(elapsed / 1000).toFixed(1)}s</div>

Loading…
Cancel
Save