diff --git a/site/content/tutorial/07-lifecycle/02-ondestroy/app-a/App.svelte b/site/content/tutorial/07-lifecycle/02-ondestroy/app-a/App.svelte index 28cdb73d0d..8fdca8d81d 100644 --- a/site/content/tutorial/07-lifecycle/02-ondestroy/app-a/App.svelte +++ b/site/content/tutorial/07-lifecycle/02-ondestroy/app-a/App.svelte @@ -1,10 +1,20 @@ -

- The page has been open for - {seconds} {seconds === 1 ? 'second' : 'seconds'} -

\ No newline at end of file +
+ +

+ The Timer component has been open for + {seconds} {seconds === 1 ? 'second' : 'seconds'} +

+ {#if open} + + {/if} +
diff --git a/site/content/tutorial/07-lifecycle/02-ondestroy/app-a/Timer.svelte b/site/content/tutorial/07-lifecycle/02-ondestroy/app-a/Timer.svelte new file mode 100644 index 0000000000..0eb5a7461d --- /dev/null +++ b/site/content/tutorial/07-lifecycle/02-ondestroy/app-a/Timer.svelte @@ -0,0 +1,20 @@ + + +

+ This component executes a callback every + {interval} millisecond{interval === 1 ? '' : 's'} +

+ + diff --git a/site/content/tutorial/07-lifecycle/02-ondestroy/app-a/utils.js b/site/content/tutorial/07-lifecycle/02-ondestroy/app-a/utils.js index 7b65e75c8c..64ab7e50c7 100644 --- a/site/content/tutorial/07-lifecycle/02-ondestroy/app-a/utils.js +++ b/site/content/tutorial/07-lifecycle/02-ondestroy/app-a/utils.js @@ -1,5 +1,9 @@ import { onDestroy } from 'svelte'; export function onInterval(callback, milliseconds) { - // implementation goes here + const interval = setInterval(callback, milliseconds); + + onDestroy(() => { + // Fix the memory leak here + }); } \ No newline at end of file diff --git a/site/content/tutorial/07-lifecycle/02-ondestroy/app-b/App.svelte b/site/content/tutorial/07-lifecycle/02-ondestroy/app-b/App.svelte index 93a721ef44..49936b6617 100644 --- a/site/content/tutorial/07-lifecycle/02-ondestroy/app-b/App.svelte +++ b/site/content/tutorial/07-lifecycle/02-ondestroy/app-b/App.svelte @@ -1,11 +1,20 @@ -

- The page has been open for - {seconds} {seconds === 1 ? 'second' : 'seconds'} -

\ No newline at end of file +
+ +

+ The Timer component has been open for + {seconds} {seconds === 1 ? 'second' : 'seconds'} +

+ {#if open} + + {/if} +
diff --git a/site/content/tutorial/07-lifecycle/02-ondestroy/app-b/Timer.svelte b/site/content/tutorial/07-lifecycle/02-ondestroy/app-b/Timer.svelte new file mode 100644 index 0000000000..0eb5a7461d --- /dev/null +++ b/site/content/tutorial/07-lifecycle/02-ondestroy/app-b/Timer.svelte @@ -0,0 +1,20 @@ + + +

+ This component executes a callback every + {interval} millisecond{interval === 1 ? '' : 's'} +

+ + diff --git a/site/content/tutorial/07-lifecycle/02-ondestroy/text.md b/site/content/tutorial/07-lifecycle/02-ondestroy/text.md index 647fbaa160..34bbf83cbf 100644 --- a/site/content/tutorial/07-lifecycle/02-ondestroy/text.md +++ b/site/content/tutorial/07-lifecycle/02-ondestroy/text.md @@ -10,8 +10,8 @@ For example, we can add a `setInterval` function when our component initialises, @@ -37,7 +37,9 @@ export function onInterval(callback, milliseconds) { -``` \ No newline at end of file +``` + +Open and close the timer a few times and make sure the counter keeps ticking and the CPU load increases. This is due to a memory leak as the previous timers are not deleted. Don't forget to refresh the page before solving the example. \ No newline at end of file