非阻塞状态更新

Question

那里！我想知道 Svelte 是否有办法以非阻塞方式更新状态。 这是人为缓慢的选项卡示例。 https://svelte.dev/repl/565c333f0ab141c1a97e96f855d2e7d0?version=4.2.12

如您所见，当您切换选项卡 2 时，它会阻止选项卡按钮处于活动状态，直到选项卡内容渲染完成。 它让 UI 感觉不那么活泼。

我正在React中寻找类似useTransition的东西：https://react.dev/reference/react/useTransition#marking-a-state-update-as-a-non-blocking-transition

提前致谢！

Answer 1

您可以将缓慢的部分包装在

#await

中，以推迟到下一个事件循环，这会导致内容单独呈现（尽管仍然在一个块中）。

{#await new Promise(r => setTimeout(r)) then}
  <!-- slow contents here -->
{/await}