如何创建延迟基础信号并立即清除的信号

Question

我想做一个信号，设置为基础信号或备忘录后，一定的延迟，并立即清除，如果基础信号被清除。下面的代码演示了我想要的内容。

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"));

虽然这是一个正确的方法，但这是可行的。我不确定createDeferred是否提供了这个功能，但我不想使用它，因为它使用调度器，所以我不知道它能做什么。

Answer 1

你的尝试完全有效。

createDeferred虽然有类似的使用程序，但在这里不像预期的那样工作，因为：

1. 传递给createDeferred的超时并不是导致更新之前等待的确切时间--在浏览器空闲之前等待是最大的超时。
2. 超时将在将信号更新为undefined和其他值之前发生。

const delayedS = createDeferred(s)

设置信号的一个较好的原语是createComputed。这是一种纯粹的计算--类似于createMemo --意味着它将在效果发生之前立即运行。在简单的例子中，使用效果通常没有区别，但是使用效果设置信号可能会导致更多的更新。

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

此外，清除undefined集上的超时(不加延迟)，可以消除一些计时错误。

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