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 9d1685b6a5..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,17 +1,20 @@
- -

counter={counter}

- {#if show} - + +

+ 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/Inner.svelte b/site/content/tutorial/07-lifecycle/02-ondestroy/app-a/Inner.svelte deleted file mode 100644 index 2d62df4eef..0000000000 --- a/site/content/tutorial/07-lifecycle/02-ondestroy/app-a/Inner.svelte +++ /dev/null @@ -1,10 +0,0 @@ - - -

This component will execute callback every {interval} milliseconds

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..8590b39971 --- /dev/null +++ b/site/content/tutorial/07-lifecycle/02-ondestroy/app-a/Timer.svelte @@ -0,0 +1,19 @@ + + +

+ This component execute 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 ea19d2b19e..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 @@ -4,6 +4,6 @@ export function onInterval(callback, milliseconds) { const interval = setInterval(callback, milliseconds); onDestroy(() => { - // After the component is destroyed, setInterval will continue to work, fix it here + // 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 9d1685b6a5..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,17 +1,20 @@
- -

counter={counter}

- {#if show} - + +

+ 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/Inner.svelte b/site/content/tutorial/07-lifecycle/02-ondestroy/app-b/Inner.svelte deleted file mode 100644 index 2d62df4eef..0000000000 --- a/site/content/tutorial/07-lifecycle/02-ondestroy/app-b/Inner.svelte +++ /dev/null @@ -1,10 +0,0 @@ - - -

This component will execute callback every {interval} milliseconds

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..8590b39971 --- /dev/null +++ b/site/content/tutorial/07-lifecycle/02-ondestroy/app-b/Timer.svelte @@ -0,0 +1,19 @@ + + +

+ This component execute 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 460f94de88..34bbf83cbf 100644 --- a/site/content/tutorial/07-lifecycle/02-ondestroy/text.md +++ b/site/content/tutorial/07-lifecycle/02-ondestroy/text.md @@ -40,4 +40,6 @@ export function onInterval(callback, milliseconds) { let counter = 0; onInterval(() => counter += 1, 1000); -``` \ 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