如何编写一个“延迟”的简洁组件？

Question

我正在尝试编写一个 Svelte 组件，在指定的时间内隐藏其插槽。

例如，下一行应在 3 秒内隐藏该段落

<Delayed mili_time={3000}> <p>some text</p> <Delayed>

我的尝试不起作用，没有显示任何内容（尽管没有引发错误，但仍显示日志）我很乐意收到一些帮助、提示或指导。

尝试：

<script>

import { onMount} from "svelte";

  export let mili_time = 500;
  let shown = false;


  onMount(
    setTimeout(() => {
      console.log("delayed!");
      shown = true;
    }, mili_time)
  );
</script>

{#if shown}
<slot />
{/if}


<style></style>

预先感谢任何阅读或回答问题的人^^

Answer 1

你的格式很糟糕，当你有一个函数调用onMount时它接受一个函数作为参数。

正确的格式是：

onMount(() => setTimeout(....)

这样函数 () => setTimeout(...)就会被执行。

在您的代码中，调用 setTimeout 函数并将该函数的返回值（对超时的引用）传递给onMount