How to create a signal that delays the underlying signal and clears immediately

Question

I want to make a signal that sets itself to underlying signal or a memo after a certain delay, and clears immediately if the underlying signal is cleared. The following code demonstrates what I want.

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

function Counter() {
   const [s, setS] = createSignal(undefined)
   const [delayedS, delayedSetS] = createSignal(undefined)


   setTimeout(() => {
     setS(10)
   }, 1000)

   setTimeout(() => {
     setS(undefined)
   }, 3000)

   createEffect(() => {
      let res = s()
      if (res !== undefined) {
         setTimeout(() => delayedSetS(res), 1000)
      } else {
         delayedSetS(undefined)
      }
   })

  return (<>
    <span> S {s()} </span>
    <span> Delayed S {delayedS()}</span>
    </>)
}

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

This works, though Is this a correct approach. I am not sure if createDeferred provides this functionality, though I don't want to use that, since it uses a scheduler I am not sure what it does.

Answer 1

Your attempt was totally valid.

The createDeferred, although it seams like it has a similar usecase, it wouldn't work here as intended, because:

1. The timeout passed to createDeferred is not an exact amount of time that it will wait before causing updates – it is a maximum timeout to wait before browser becomes idle.
2. The timeout would happen before both updating the signal to undefined and other values.

const delayedS = createDeferred(s)

A preferable primitive for setting signals is createComputed. It is a pure computation – similar to createMemo – meaning that it will run immediately before effects. In simple examples there is usually no difference to use of effect, but using an effect for setting signals could potentially cause more updates than necessary.

  createComputed(
    on(s, (v) => {
      if (v) setTimeout(() => setDelayedS(v), 1000);
      else setDelayedS();
    })
  );

Additionally clearing the timeout on the set to undefined that happens without a delay, could eliminate some timing glitches.

  let timeoutId = 0;
  createComputed(
    on(s, (v) => {
      if (v) timeoutId = setTimeout(() => setDelayedS(v), 1000);
      else {
        setDelayedS();
        clearTimeout(timeoutId);
      }
    })
  );
  onCleanup(() => clearTimeout(timeoutId));