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

View file

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

View file

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