SolidJS•2y ago

Set Timeout Example

I want to update a single every x seconds in a component. Are there any examples of this I can look at? Right now this is my approach, but it is not working. I can't seem to find any examples anywhere.

import { render } from "solid-js/web";
import { createSignal, onMount } from "solid-js";

function Counter() {
  const [count, setCount] = createSignal(1);
  const increment = () => {
    setCount(count() + 1);
    console.log('Incrementing')

    window.setTimeout(() => {
      increment();
    }, 1000);
  }

  onMount(() => increment());

  return (
    count()
  );
}

render(() => <Counter />, document.getElementById("app")!);

import { render } from "solid-js/web";
import { createSignal, onMount } from "solid-js";

function Counter() {
  const [count, setCount] = createSignal(1);
  const increment = () => {
    setCount(count() + 1);
    console.log('Incrementing')

    window.setTimeout(() => {
      increment();
    }, 1000);
  }

  onMount(() => increment());

  return (
    count()
  );
}

render(() => <Counter />, document.getElementById("app")!);

6 Replies

thetarnav•2y ago

sth like this?

onMount(() => {
  const timeoutId = setInterval(() => setCount(p => ++p), 1000)
  onCleanup(() => clearInterval(timeoutId))
})

onMount(() => {
  const timeoutId = setInterval(() => setCount(p => ++p), 1000)
  onCleanup(() => clearInterval(timeoutId))
})

also return count like this

return count

return count

return <>{count()}</>

return <>{count()}</>

count() executes the signal and return the value, but if noone is listening, nothing will update when it changes

FutureLights•2y ago

Yes, ty. In my app web I try that I get this message dev.js:736 computations created outside a 'createRoot' or 'render' will never be disposed. Any ideas on why? I have a similar structure to my example above. The exact code for that is

const [activeImageIndex, setActiveImageIndex] = createSignal(0);

const transition = () => {
    setActiveImageIndex(prev => ++prev % props.images.length);

    setTimeout(() => {
        transition();
    }, random(4000, 7000));
}

onMount(() => {
    setTimeout(() => transition(), random(4000, 7000));
});

const [activeImageIndex, setActiveImageIndex] = createSignal(0);

const transition = () => {
    setActiveImageIndex(prev => ++prev % props.images.length);

    setTimeout(() => {
        transition();
    }, random(4000, 7000));
}

onMount(() => {
    setTimeout(() => transition(), random(4000, 7000));
});

thetarnav•2y ago

is the onMount top-level? that's the only computation in the picture

is the onMount top-level

or differently, is it declared in a component or not

FutureLights•2y ago

It is declared in a component. Sorry I should have specified.

export const SmallProject: Component<{
...
}> = (props) => {

    const [activeImageIndex, setActiveImageIndex] = createSignal(0);

    const transition = () => {
        setActiveImageIndex(prev => ++prev % props.images.length);

        setTimeout(() => {
            transition();
        }, random(4000, 7000));
    }

    onMount(() => {
        setTimeout(() => transition(), random(4000, 7000));
    });

    return <div
        class={style.SmallProject}  
    >
        <div class={style.Images}>
            <For each={props.images}>
                {(image, i) => <div 
                    class={css(style.Image, activeImageIndex() === i() && style.Active)}
                >{image}</div> }
            </For>
        </div>
    </div>
}

export const SmallProject: Component<{
...
}> = (props) => {

    const [activeImageIndex, setActiveImageIndex] = createSignal(0);

    const transition = () => {
        setActiveImageIndex(prev => ++prev % props.images.length);

        setTimeout(() => {
            transition();
        }, random(4000, 7000));
    }

    onMount(() => {
        setTimeout(() => transition(), random(4000, 7000));
    });

    return <div
        class={style.SmallProject}  
    >
        <div class={style.Images}>
            <For each={props.images}>
                {(image, i) => <div 
                    class={css(style.Image, activeImageIndex() === i() && style.Active)}
                >{image}</div> }
            </For>
        </div>
    </div>
}

thetarnav•2y ago

I don't see any issues here if you comment out the onMount, does the warning go away? also you probably can follow the stack trace of the warning

FutureLights•2y ago

Uncommenting didn't fix it. My error is probably somewhere else then. The trace goes there first and the error appears every time the interval fires. It might have something to do with my images. Thanks for your help. Ok, so I figured it out, and you were right. The issue isn't in the code above. I was wrapping each of my images with a component. When I cut that out and just used an img the warning went away, Not really for sure why, but it is officially gone. Thanks for your help!

Gaming

Programming

Set Timeout Example