在等待一段时间后显示加载程序的简洁方法是什么？

Question

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

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

等待 200 毫秒后才显示 Spinner 组件的好方法是什么？我本能地想设置一个计时器，但我敢打赌有更好的简洁方法。

Answer 1

最动态的方法是添加另一个承诺。

<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}

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

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

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