fix: clear timeout in onMount return function

This commit is contained in:
Eric Liu 2020-07-24 17:18:23 -07:00
commit fff54a19eb
3 changed files with 23 additions and 21 deletions

View file

@ -3,15 +3,17 @@
export let feedbackTimeout = 2000; export let feedbackTimeout = 2000;
export let ref = null; export let ref = null;
import { onDestroy } from "svelte"; import { onMount } from "svelte";
$: animation = undefined; let animation = undefined;
$: timeoutId = undefined; let timeout = undefined;
$: showFeedback = timeoutId !== undefined;
onDestroy(() => { $: showFeedback = timeout !== undefined;
window.clearTimeout(timeoutId);
timeoutId = undefined; onMount(() => {
return () => {
clearTimeout(timeout);
};
}); });
</script> </script>
@ -29,7 +31,7 @@
on:click={() => { on:click={() => {
if (animation === 'fade-in') return; if (animation === 'fade-in') return;
animation = 'fade-in'; animation = 'fade-in';
timeoutId = setTimeout(() => { timeout = setTimeout(() => {
animation = 'fade-out'; animation = 'fade-out';
}, feedbackTimeout); }, feedbackTimeout);
}} }}

View file

@ -4,27 +4,28 @@
export let iconDescription = undefined; export let iconDescription = undefined;
export let successDelay = 1500; export let successDelay = 1500;
import { createEventDispatcher, afterUpdate, onDestroy } from "svelte"; import { createEventDispatcher, afterUpdate, onMount } from "svelte";
import CheckmarkFilled16 from "carbon-icons-svelte/lib/CheckmarkFilled16"; import CheckmarkFilled16 from "carbon-icons-svelte/lib/CheckmarkFilled16";
import Error20 from "carbon-icons-svelte/lib/Error20"; import Error20 from "carbon-icons-svelte/lib/Error20";
import { Loading } from "../Loading"; import { Loading } from "../Loading";
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
$: timeoutId = undefined; let timeout = undefined;
onMount(() => {
return () => {
clearTimeout(timeout);
};
});
afterUpdate(() => { afterUpdate(() => {
if (status === "finished") { if (status === "finished") {
timeoutId = window.setTimeout(() => { timeout = setTimeout(() => {
dispatch("success"); dispatch("success");
}, successDelay); }, successDelay);
} }
}); });
onDestroy(() => {
window.clearTimeout(timeoutId);
timeoutId = undefined;
});
</script> </script>
<div <div

View file

@ -17,19 +17,18 @@
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
$: open = true; let open = true;
$: timeoutId = undefined; let timeoutId = undefined;
onMount(() => { onMount(() => {
if (timeout) { if (timeout) {
timeoutId = window.setTimeout(() => { timeoutId = setTimeout(() => {
open = false; open = false;
}, timeout); }, timeout);
} }
return () => { return () => {
window.clearTimeout(timeoutId); clearTimeout(timeoutId);
timeoutId = undefined;
}; };
}); });
</script> </script>