当用户从一个页面导航到另一个页面时，SvelteKit 会调用你的 load 函数，但前提是它认为某些内容发生了变化。

在这个例子中，在时区之间导航会导致 src/routes/[...timezone]/+page.js 中的 load 函数重新运行，因为 params.timezone 无效。但是 src/routes/+layout.js 中的 load 函数不会重新运行，因为就 SvelteKit 而言，它没有被导航操作使失效。

我们可以使用 invalidate(...) 函数手动使它失效，该函数接受一个 URL 并重新运行依赖于它的任何 load 函数。因为 src/routes/+layout.js 中的 load 函数调用了 fetch('/api/now')，所以它依赖于 /api/now。

在 src/routes/[...timezone]/+page.svelte 中，添加一个 onMount 回调，每秒调用一次 invalidate('/api/now')

<script>
	import { onMount } from 'svelte';
	import { invalidate } from '$app/navigation';

	let { data } = $props();

	onMount(() => {
		const interval = setInterval(() => {
			invalidate('/api/now');
		}, 1000);

		return () => {
			clearInterval(interval);
		};
	});
</script>

<h1>
	{new Intl.DateTimeFormat([], {
		timeStyle: 'full',
		timeZone: data.timezone
	}).format(new Date(data.now))}
</h1>

你还可以将一个函数传递给 invalidate，如果你想根据模式而不是特定 URL 来失效。