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} +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} +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