SolidJS•16mo ago

how to update the DOM styles in a time sequence when a single signal changes?

I want a group of

div

div

elements to appear one by one.

I tried to do this, it seems that

createEffect

createEffect

only updates once?

// ...
const [signal, setSignal] = createSignal(false);
let refDiv1, refDiv2;
createEffect(async ()=> {
    if(signal()) {
        refDiv1.style.display='block';
        await new Promise(resolve => setTimeout(resolve, 1000));
        refDiv2.style.display='block';
        await new Promise(resolve => setTimeout(resolve, 1000));
       // ... 
    }
})

// ...
const [signal, setSignal] = createSignal(false);
let refDiv1, refDiv2;
createEffect(async ()=> {
    if(signal()) {
        refDiv1.style.display='block';
        await new Promise(resolve => setTimeout(resolve, 1000));
        refDiv2.style.display='block';
        await new Promise(resolve => setTimeout(resolve, 1000));
       // ... 
    }
})

bigmistqke•8/23/24, 1:57 PM

it should be fine

bigmistqke•8/23/24, 1:58 PM

signals and async can be tricky, when you access signals after an await it will not add itself to effect's subscriptions, but since you do it before you await anything, it should be fine

bigmistqke•8/23/24, 1:58 PM

https://playground.solidjs.com/anonymous/a324cdcc-6673-4150-8351-a8f8899d88a9 you can see in the log that it logs each second

Solid Playground

Quickly discover what the solid compiler will generate from your JSX template

bigmistqke•8/23/24, 2:13 PM

the approach is a bit footgunny tho, you would need to think about a way that you can abort the async code though: what to do when the effect is called again while the async function is still running?

bigmistqke•8/23/24, 2:14 PM

a more css-y approach: https://playground.solidjs.com/anonymous/dfeb2b92-2fbf-4380-b30a-67f0eae8a47e

Solid Playground

Quickly discover what the solid compiler will generate from your JSX template

Bbigmistqke the approach is a bit footgunny tho, you would need to think about a way that yo...

bigmistqke•8/23/24, 2:19 PM

if you need to mount the html-elements (you can sadly not animate with pure css), i would advice the following: https://playground.solidjs.com/anonymous/cdfd7235-4e8f-481a-80d8-b6f64baf6de9

instead of having the async code in one big block (and then needing to deal with the possibility of the effect being called again while the async function is still running), you let solid's take care of it

Solid Playground

Quickly discover what the solid compiler will generate from your JSX template

rez2o_OP•8/23/24, 5:32 PM

thx a lot! Your solution is very clear
I really stuck by the asyn in createEffect function, I shouldn't do this.

Rrez2o_thx a lot! Your solution is very clear I really stuck by the asyn in createEffec...

bigmistqke•8/24/24, 12:58 PM

u are super welcome!