最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How to write a "Delayed" svelte component? - Stack Overflow

programmeradmin5浏览0评论

I'm trying to write a Svelte ponent that hides its slot during the time specified.

For example, this next line should hide the paragraph during 3 seconds

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

My attempt is not working and nothing is being shown (plus the log is shown though no errors are being raised) I'd love to receive some help, tips or guidance.

The attempt:

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

Thanks in advance to anyone reading or answering for getting till the end of the question ^^

I'm trying to write a Svelte ponent that hides its slot during the time specified.

For example, this next line should hide the paragraph during 3 seconds

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

My attempt is not working and nothing is being shown (plus the log is shown though no errors are being raised) I'd love to receive some help, tips or guidance.

The attempt:

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

Thanks in advance to anyone reading or answering for getting till the end of the question ^^

Share Improve this question asked Apr 8, 2021 at 13:19 Alejandro DíazAlejandro Díaz 311 silver badge4 bronze badges 1
  • Actually this is fine, I suggest doing CSS as well for hiding the element when the timeout ends and use timeout as a prop for reusable ponents. – Leo Borai Commented May 9, 2022 at 21:59
Add a ment  | 

3 Answers 3

Reset to default 6

your onMount is badly formatted, it takes as an argument a function while you have a function call.

The correct format would be:

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

This way the function () => setTimeout(...) will be executed.

In your code, the setTimeout function is called and the return value of that function (a reference to the timeout) is passed into onMount

With a 100% native Component:

<delayed-content delay="1000" hidden>
  <h1>Hello World</h1>
</delayed-content>
<script>
  customElements.define("delayed-content", class extends HTMLElement {
    connectedCallback() {
      setTimeout(() => {
        this.removeAttribute("hidden");
      }, Number(this.getAttribute("delay")));
    }
  });
</script>

You can set a timeout after rendering and use a CSS class to hide the element as follows:

<script>
  import { onMount } from 'svelte';

  export let timeout = 3000;
  export let hidden = false;

  onMount(() => {
    setTimeout(() => {
      hidden = true;
    }, timeout);
  });
</script>

<div class:hidden>
  <p>Some cool content here</p>
</div>

<style type="text/css">
  .hidden {
    display: none;
  }
</style>
发布评论

评论列表(0)

  1. 暂无评论