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

// ...
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));
       // ... 
    }
})