Svelte：如何等待组件渲染

Question

我正在制作一个基于套接字连接的简单应用程序。基本上，一个用户决定其他用户可以看到什么。功能之一是为其他用户启动计时器。因此，有一个带有timerState变量和startTimer函数的Timer组件。当用户连接到套接字时，计时器组件与整个用户视图一起呈现。对传入事件“计时器已启动”做出反应非常简单并且工作完美。当计时器已经启动并且用户刷新浏览器时（或者在计时器已经设置时只是晚连接），问题就开始了。设置计时器的信息存储在数据对象中，该数据对象在初始连接到套接字后作为欢迎事件发送给用户。

为了简化，用户视图的组成如下：

{#if !isDataComplete}
<WaitingComponent>
{:else}
<Timer bind:{tools}>
{/if}

Tools是一个对象，包含一些方法，主要是startTimer方法。

因此，连接后，用户接收数据对象，该数据对象将 wiev 从等待切换到应用程序 wiev（此处：计时器，最初为空，但已渲染）。如果有计时器属性，则意味着已经设置了计时器，并且应该调用 startTimer 方法。但是，startTimer 方法尚无法访问，因为脚本比渲染速度更快，并且计时器组件尚不存在。实际上并没有获取数据，它带有来自套接字的“欢迎”事件，因此等待数据并不能解决问题，我需要等待组件渲染。

{#if !isDataComplete}
<WaitingComponent>
{:else}
<Timer bind:{tools}>
{/if}

正如您所看到的：我通过在脚本中添加等待 setTimeout 500 毫秒（在调用 startTimer 之前）“解决”了这个问题 - 做到了这一点，组件管理渲染并且方法已经可以访问。但不知怎的，我觉得这是蹩脚的解决方案，所以也许有人可以通过其他方式提供帮助？

我只需将计时器组件放在 if 块之外，使其甚至在接收数据之前就进行渲染，但这并不是一个好主意，因为视图结构。

我试图将 setTimer 方法存储在其他地方并导入它，但这会导致从外部管理计时器状态时遇到一些困难。但这当然是一种有效的尝试方法。

多谢！普热梅克

Answer 1

我相信你想要的是tick功能。来自tick()文档：

返回一个承诺，一旦应用了任何挂起的状态更改，该承诺就会解决；如果没有，则在下一个微任务中解决。

import { tick } from 'svelte';

使用它，您可以将代码插入await tick();到您希望代码等待应用所有阶段更改并更新模板的位置。

Answer 2

您可以使用：

 {#await yourFunctionYouawait} 
     <p>wait...</p>
 {:then yourResult}
      <p>
        { yourResult }
      </p>
   {/await}

在这里你会找到更多的解释。