时间戳

首页 > 解决方案 > 在等待一段时间后显示装载机的苗条方法是什么？

svelte - 在等待一段时间后显示装载机的苗条方法是什么？

问题描述

要在等待 Web 请求响应时显示加载微调器，我将在微调器组件中使用以下非常简单的 if 语句：

{#if waitingForAPIResponse}
    <Spinner></Spinner>
{/if}

什么是仅在等待 200 毫秒后才显示 Spinner 组件的好方法？我凭直觉想设置一个计时器，但我敢打赌有更好的苗条方法。

标签： svelte

解决方案

最动态的方法是在组合中添加另一个承诺。

<script>
    const wait = () => new Promise((res) => setTimeout(res , 1000))
</script>

{#await APIRequest}
    {#await wait()}
        <span>Not going to take long</span>
    {:then a}
        <span>Taking a while</span>
  {/await}
{:then data}
    ...
{/await}

这里重要的是，“内部等待”调用了一个函数，这将在每次呈现时触发一个新 Promise 的创建（例如，如果由于某种原因您重新触发 APIRequest）。

通过简单地将参数传递给，这也可以扩展为灵活地等待多长时间wait：

const wait = delay => new Promise((res) => setTimeout(res, delay))

推荐阅读