S
SolidJS•5mo ago
rez2o_

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

I want a group of div elements to appear one by one. I tried to do this, it seems that 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));
       // ... 
    }
})
7 Replies
bigmistqke
bigmistqke•5mo ago
it should be fine 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
bigmistqke•5mo ago
https://playground.solidjs.com/anonymous/a324cdcc-6673-4150-8351-a8f8899d88a9 you can see in the log that it logs hallo each second
Solid Playground
Quickly discover what the solid compiler will generate from your JSX template
bigmistqke
bigmistqke•5mo ago
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
bigmistqke•5mo ago
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
bigmistqke
bigmistqke•5mo ago
if you need to mount the html-elements (you can sadly not animate display 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 createResource take care of it
Solid Playground
Quickly discover what the solid compiler will generate from your JSX template
rez2o_
rez2o_OP•5mo ago
thx a lot! Your solution is very clear I really stuck by the asyn in createEffect function, I shouldn't do this.
bigmistqke
bigmistqke•5mo ago
u are super welcome!

Did you find this page helpful?