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..9d1685b6a5 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,17 @@ -
- The page has been open for - {seconds} {seconds === 1 ? 'second' : 'seconds'} -
\ No newline at end of file +counter={counter}
+ {#if show} +This component will execute callback every {interval} milliseconds
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..ea19d2b19e 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(() => { + // After the component is destroyed, setInterval will continue to work, fix it 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..9d1685b6a5 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,17 @@ -- The page has been open for - {seconds} {seconds === 1 ? 'second' : 'seconds'} -
\ No newline at end of file +counter={counter}
+ {#if show} +This component will execute callback every {interval} milliseconds
diff --git a/site/content/tutorial/07-lifecycle/02-ondestroy/text.md b/site/content/tutorial/07-lifecycle/02-ondestroy/text.md index 647fbaa160..460f94de88 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,7 @@ export function onInterval(callback, milliseconds) { ``` \ No newline at end of file